Color picker handle issues

[jameskoster]

Description

color.picker.handle.mp4

Visually: it's strange that the handle is clipped when it's close to the edge of the picker.

Behaviourally: when the cursor is outside the picker the handle stops moving, and eventually seems to close the entire picker for no reason.

Step-by-step reproduction instructions

1. Open a color picker and observe the clipped handle when it's close to an edge
2. Drag the handle and move the cursor outside of the picker container, notice that the handle stops moving.

Screenshots, screen recording, code snippet

No response

Environment info

Gutenberg trunk
WordPress 6.2

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

[hanneslsm]

Linking for visibility another issue with the color picker by moving the cursor outside the container. Don't know if this is related though. #47504

[ciampo]

Could you specificy better what is the expected behaviour?

Also note that the color picker is internally using the react-colorful library, and therefore it may be tricky to change some aspects of the picker.

[jameskoster]

Sure.

Currently the handle gets clipped like this:

Ideally it remains visible:

---

When dragging the handle, if the cursor exits the container then control is lost. Ideally the user shouldn't have to keep their cursor strictly inside .react-colorful__interactive while dragging. Here's how it works in Figma which is what we're aiming for:

handle.mp4

[ciampo]

Thank you!

Ideally it remains visible

I believe that's something related to how we assign overflow: hidden to the color picker popover, I'll see if we can do anything about it.

When dragging the handle, if the cursor exits the container then control is lost

Now I see what you mean. My suspicion is that the reason why the cursor doesn't move is because of the block editor canvas being embedded in a iframe. The iframe would capture the pointer events, and would therefore prevent those events from moving the handle.

Out of curiosity, I tried interacting with the storybook example: as you can see, as far as the cursor stays within the Storybook demo canvas, the drag handle moves as expected. But as soon as my cursor hovers over the Storybook toolbar and sidebar (which are outside of the Storybook canvas' iframe), the drag handle stops following the cursor.

color-picker-drag.mp4

[jameskoster]

Oh good catch. I guess that's going to make it quite tricky to fix?

[ciampo]

The iframe could indeed complicate things, although it looks like the main culript is a combination of overflow CSS rules that comes into play when the ColorPicker component is rendered inside a Popover.

Trying an approach in #54164