Custom color picker in the paragraph block closing prematurely

[roo2]

Describe the bug
When clicking on the (hue selector?) part of the custom color picker, the color picker is closed prematurely:

To reproduce
Steps to reproduce the behavior:

1. Open the Gutenberg editor and select a paragraph block
2. Under "Block Settings -> Color settings" click Custom Color
3. Move the color hue selector

Expected behavior
The custom color picker is closed

Additional context

• This was noticed by WordPress.com users using Gutenberg 7.7.1

[yansern]

As far as I can track down, when a color is selected from the color picker, something in the editor is stealing focus from the color picker, causing the dropdown to think it has been blurred, and thus, closing the color picker.

[yansern]

The component structure looks like this:

Paragraph
    |__TextColor (dynamically generated wrapper component from `useColors`)
       |__RichText

The TextColor wrapper component is responsible for changing the text color. However, the issue is that, whenever the text color has changed, the entire RichText component block gets recreated.

When the RichText component is recreated, it does all the content initialization (see applyRecord in componentDidMount) which includes setting a caret which causes the contenteditable element to steal focus. (see range.setStart()/range.setEnd() under applySelection() in to-dom).

When the focus is stolen, the Dropdown component that holds the color picker thinks user is clicking outside of the dropdown, and hides the color picker.

I see there are 2 ways around this:

1. Fix the TextColor wrapper component by ensuring it doesn't recreate the RichText component.

I haven't look deeper into useColors so I don't know if this is possible as React is responsible in deciding how to best rerender the DOM tree. Also, interesting to note that useColors hook dynamically generates wrapper component. Therefore, do not try to use TextColor as a search keyword, you'll reach a dead end, just look directly inside use-colors.js.

2. Introduce an option to disable close on focus on Dropdown component.

While it is nice to have this option, I predict the logic around deciding when the color picker dropdown should stay open, and when it shouldn't, could be tricky/dirty as well.

[yansern]

@ellatrix Would you be able to take a look at this or offer a few pointers as I see you've got your fingerprints all over this in the commit history?

[jorgefilipecosta]

According to the git bisect this issue is a regressing that happened on #19701. I'm not sure the relation that PR has to the issue. cc: @ellatrix

[ellatrix]

I see somehow RichText is setting focus back, which shouldn't be happening.

[ellatrix]

Actually, this has nothing to do with RichText. The problem is that the <Block> is now nested in the <TextColor> components, which rerender the children if the color changes. <Block> sets focus on mount.

[ellatrix]

@jorgefilipecosta Any idea how we could avoid the color components remounting its children?

[ellatrix]

#21037 fixes this issue.

[jorgefilipecosta]

components, which rerender the children if the color changes
@jorgefilipecosta Any idea how we could avoid the color components remounting its children?

I'm not totally familiar with how the hook works but given that #21037 fixes the issue and that is the new approach we are trying I guess we should try to merge that PR instead of trying a fix for this in useColors.