[Toolbar ColorPicker] In the Toolbar in the Colorpicker the Colors are jumping between two hexCode colors

[Floriandrias96]

Description

Feature ColorPicker in the Tollbar is not working as intended. I expext when I paste a hex Color in the ColorPicker to see the Color, but when you paste a Hex Color the ColorPicker jumps between the new and old Color instead. see gif: "Toolbar ColorPicker Jumping Bug".

Step-by-step reproduction instructions

1. Open the Toolbar of a TextBlock (e.g. Paragraph).
2. Click on "Displays more block tools.
3. Click on "Highlight" but with no Text selected (works with Link or just Text) .
4. Open CustomColor.
5. Click on "Show detailed inputs".
6. Paste a different Hexcolor into the inputfield that is curently used.

Screenshots, screen recording, code snippet

Environment info

Wordpressversion: 5.9.3
Gutenbergversion: 12.9.0
Active Theme: Twenty Twenty-Two
Testet on Browser: Chrome, Firefox and Edge
Device: PC

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

[ntsekouras]

This can be also reproduced by clicking backspace in the input for the custom color. It seems it might involve inner input components handling... --cc @ciampo @mirka

[ciampo]

Thank you for the ping!

I can reproduce the issue as described by both @Floriandrias96 and @ntsekouras in the editor, however I was not able to reproduce it on the ColorPicker component in isolation.

I'll look a bit more into that and come back with any further discovery.

[ciampo]

I also checked the ColorPalette component in isolation, and wasn't able to reproduce the issue.

The issue seems related to some sort of "infinite loop" where a new color value is not committed properly to whatever "state" is stored.

Next up, I would look at the InlineColorUI component, in particular at its "internal" ColorPicker and at its logic to set / get colors.

I'm really not familiar with this part of the codebase, and so it'd be great if someone with more familiarity could take a look as well.

It would also be interesting to find out when this bug introduced — it may give further hints to what's causing it.

[cuemarie]

In case these are related, I've opened the following reports based on the Automattic/wp-calypso#59566 issue above:

• Inline Highlight ColorPicker - Typing hex codes default to 000000, causes colorpicker to jump location #49286
• Inline Highlight ColorPicker - In Gutenberg 15.4.0, ColorPicker closes the first time I try to change colors #49287

[ciampo]

Hey @Floriandrias96 and @ntsekouras , I took another quick look and couldn't reproduce this issue on latest trunk (i.e. the flashing between two different colors in the color picker).

In case you can't reproduce it either, we can close this issue.

[ntsekouras]

I couldn't reproduce either.. Let's close for now and feel free to reopen if someone can reproduce.