Inline Highlight ColorPicker - In Gutenberg 15.4.0, ColorPicker closes the first time I try to change colors

[cuemarie]

Description

On a test site using WordPress 6.1.1, and Gutenberg 15.4.0 active, the Inline Highlight ColorPicker closes the first time I try typing in a hex code, but works when I reopen it. It also seems to close the first time I try to set a color using the drag option, or picking one of the theme colors - but then works again once I reopen the interface.

Step-by-step reproduction instructions

1. On a test site with WordPress 6.1.1 and Gutenberg 15.4.0 active, create a new page/post with text content
2. Highlight text, then use the Toolbar > Highlight to set a custom color using the Hex code field
3. Reopen the colorpicker and try the same change on the same word again
4. Next, highlight a new word, and try setting a color

Screenshots, screen recording, code snippet

Screen.Capture.on.2023-03-22.at.13-19-23.mp4

Environment info

• WordPress 6.1.1
• Gutenberg 15.4.0
• Theme: Twenty Twenty-Three v1.0
• Browser: FireFox 111.0

This report stems from troubleshooting on this open report: Automattic/wp-calypso#59566

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

[Mamaduka]

I can reproduce the issue, but in my case, Popover jumps to the top left corner. The same happens when clearing the selected color.

Screencast

CleanShot.2023-03-23.at.09.44.41.mp4

[ciampo]

Thank you for the issue report, @cuemarie !

Re. the jumping behaviour, I already left a reply on related issue #49286 (comment)

I am otherwise not able to reproduce the rest of the issue (popover closing unexpectedly) on latest trunk

[t-hamano]

I think this issue is resolved in #54736, so I'd like to close it.

Instead, #54909 has been filed to explore a more fundamental solution.