Gutenberg: Changing a RichText value automatically focus the RichText

[jorgefilipecosta]

Describe the bug
Currently, if we change a RichText value the RichText gets focused and becomes the active element event if another element was focused and rich text value is changed using a programmatic interface e.g: wp.data.dispatch( 'core/block-editor' ).updateBlockAttributes( block.clientId, { content: '1<strong>234</strong>56789' } );.

Previously the popover was closed when a click outside them happened; now they are closed when the focus is outside them. This change makes the rich text automatically gaining focus problem worse. For example, if we have popover with a SelectControl that allows switching the content of a paragraph between some predefined values when the select is used, the popover closes.

Another side effect is that on PR https://github.com/WordPress/gutenberg/pull/16014 that adds custom color as a format, each time we try to use the color picker the popover closes, because when we use the color picker there is a change in the format leaving to a change to the content of paragraph and making the focus go outside the popover.
I guess we should address this issue before WordPress 5.3 because this problem may affect third-party plugins that add color options or even other option in a popover.

I guess we may also have a11y related problems with moving the focus.

To reproduce
Steps to reproduce the behavior:

• Insert paragraph block:

const block = wp.blocks.createBlock( 'core/paragraph', { content: '123456789' } );
wp.data.dispatch( 'core/block-editor' ).insertBlock( block );

• Put the cursor inside the paragraph e.g. in the middle of the paragraph.
  Focus some element on the page (and verify it gets focused):

document.querySelector( 'button.editor-block-navigation' ).focus();
console.log( document.activeElement );
````
- Programatically change the paragraph content and verify the paragraph becomes the active element:

wp.data.dispatch( 'core/block-editor' ).updateBlockAttributes( block.clientId, { content: '1<strong>234</strong>56789' } );
console.log( document.activeElement );

```

cc: @ellatrix

[youknowriad]

This looks like high priority for me as it may have broken a lot of plugins. Any ideas how we can solve it?

[jorgefilipecosta]

This looks like high priority for me as it may have broken a lot of plugins. Any ideas how we can solve it?

I don't think RichText regressed it probably was always like that when a change happens the RichText gets focus. The problem is that if we want to keep the behavior of closing popovers when the focus is outside them we need to change this RichText behavior.
For now, I don't have an idea about the direction to solve this inside RichTex, unfortunately, I'm not very knowledgeable on its internals.
But if you think it is worth it, I can shift my priorities and look into how to address this inside RichText.
cc: @ellatrix in case you know an easy solution for the issue.

I tested a third-party plugin "Mighty Blocks" and its functionality to choose a background or text color partially in a paragraph is affected as expected and the color picker popover closes every time a "color move" happens making it very hard to use.

[ellatrix]

I’ll look into it asap.

[ellatrix]

I'm not sure if I can reproduce this.

[ellatrix]

I see now in the instructions to focus RichText, then focus outside, but this was the behaviour before as well? Could you share the user experience that is currently broken with the popovers you mention?

[phpbits]

@ellatrix The custom color selection in this pull request of mine : https://github.com/WordPress/gutenberg/pull/16014

You could also try the issue on this plugin of yours : https://wordpress.org/plugins/advanced-rich-text-tools/ . The custom color picker selection is closing automatically.

Let me know your thoughts. Thanks!

[jorgefilipecosta]

I see now in the instructions to focus RichText, then focus outside, but this was the behaviour before as well? Could you share the user experience that is currently broken with the popovers you mention?

Hi @ellatrix, yes to reproduce the focus needs to be inside RichText, and then programmatically focus another element, when the rich text changes even if the user did not interact with it (programmatic change) the RichText will get focused.
I think you are right and this was the behavior before what made the problem noticeable was that the popovers now autoclose if the focus is not inside them. So for example on advanced-rich-text-tools when one applies any type of color changes the color popover closes making it unusable.
For a11y reasons we need to keep the behavior of closing unfocused popovers, so the solution to the problem is making sure RichText does not gains focus when a value change happens.

[ellatrix]

When was the change to popovers introduced? I'll think about it. Some buttons do rely on rich text gaining focus after a change.

[jorgefilipecosta]

I think it was introduced in this PR https://github.com/WordPress/gutenberg/pull/14851. More or less eight weeks ago.

[phpbits]

@ellatrix @jorgefilipecosta Found another issue which is probably related to RichText focus. I'm trying to display Modal after consecutive empty paragraphs and focusOnMount seems not working on the Gutenberg plugin version. The cursor is always focused on the RichText, thus clicking TAB doesn't navigate to the modal contents.

Here's the screenshot where the cursor is still on the RichText even if Modal is opened.

Working on the core editor though :

[phpbits]

Checked the issue with Modal on the PR fixes and I had to do this to prevent it from happening :

https://github.com/phpbits/block-options/blob/292c19b117eb7153e0c65ddbe9a3d03b267a41a9/src/extensions/transform/empty-paragraphs/components/controls.js#L28

@ellatrix Do you by any chance created function that I can use to remove/reset focus from RichText? Thanks!