Editor: ColorPicker panel is "bouncing" on Chrome/Win10

[jdy68]

Hi,

I have a bug with the color picker that allows modify text color under WP 5.4-beta3-47402 with Chrome (Version 80.0.3987.122 (Official Build) (64 bits)) on Win10 version 1909.

This bug does not appear in firefox on the same Win10.

Description of bug:
When I want to change the color of some words in a paragraph block :
I select the words I then use the Text color command from the block menu bar.
Then I click on Custom Color: the color selection box is displayed.
I change the displayed hexadecimal code #0071a1 to #0073aa, the box then moves to the right end of the screen and then moves slightly until I click in a neutral part of the screen.
The color is correctly applied to the selection.

The bug also happens if I click in the hexadecimal code input field and then choose a color with the mouse pointer.

The bug does not appear if I choose one of the predefined colors.

Thanks for the patch.

[jdy68]

A video screen capture of the bug

[afercia]

@jdy68 thanks for your report. I was able to reproduce this on latest trunk 47412.

I change the displayed hexadecimal code #0071a1 to #0073aa

Just to clarify: it happens when manually changing the color value within the fields whether it's hex, rgb, or hsl.

The resulting effect is so disconcerting that I don't think this feature can be shipped in its current state.

[afercia]

I can reproduce an odd behavior on macOS Firefox as well. See the animated GIF attached below.

• manually edit the color value
• the color picker closes immediately after I type the last hex value character: this shouldn't happen and it's different from what happens in Chrome
• edit the text color again
• as soon as I type the last character, the custom color UI closes but the rest of the color picker UI moves to the left and stays there

[kebbet]

Can reproduce on

• macos 10.14.6
• chrome 80.0.3987.122
• RC1 (actually 5.5-alpha-47430)
• twentytwenty

To reproduce

• Select text part
• Select text color
• Click "Custom color"
• Click in HEX-color input field.
• Click color gradient

Vid/gif coming soon.

[kebbet]

Color picker jumps in Chrome

[jorgefilipecosta]

The issue should be fixed on WordPress 5.4 RC 2.

[jdy68]

A big thanks to @jorgefilipecosta for the fix.
It's a pleasure to use a color picker that doesn't wiggle and that in a very short time, bravo!