ColorPicker: Dragging selection in gradient picker throws error

[aaronrobertshaw]

Description

Color selection for one point in a gradient throws a max depth exceeded error when using the drag gesture within the color picker.

I expected to be able to click on a color point in the gradient slider, then be able to drag the selection around in the color picker popover. Instead, when doing so, an error is thrown and block gets invalidated in the editor.

Step-by-step reproduction instructions

1. Open block editor and add something that supports gradient colors e.g. Group or Cover blocks
2. Select the block, expand the Colors panel in the InspectorControls sidebar
3. For the background color, click the gradient tab and select a gradient
4. Click on one of the color points in the gradient slider
5. In the color picker, click and drag around, after a second the block will invalidate and error is shown in console

Screenshots, screen recording, code snippet

Screen.Recording.2021-10-29.at.12.25.02.pm.mp4

Environment info

• WP 5.8
• Gutenberg: trunk
• Theme: Q
• All browsers
• MacOS

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[Thelmachido]

The same issue was reported here: [32764618-hc]

I advised the user to try and click on the color they want and not use the drag function. The block didn't crush in this case.

[skorasaurus]

more screenshares describing this issue at #36992