RichText: When clicking on a RichText with keepPlaceholderOnFocus the caret doesn't appear

[atimmer]

Description

When clicking with the mouse on a RichText that has keepPlaceholderOnFocus set to true the caret doesn't appear.

Step-by-step reproduction instructions

JavaScript for a reduced block

```js import { RichText, useBlockProps } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; export const name = 'atimmer/placeholder-test', settings = { apiVersion: 2, title: __( 'Placeholder test', 'shiro' ), attributes: { content: { type: 'string', source: 'html', selector: '.placeholder-test__content', }, }, edit: function EditPlaceholderTest( { attributes, setAttributes } ) { const blockProps = useBlockProps( { className: 'placeholder-test' } ); const { content } = attributes; return ( setAttributes( { content } ) } /> ); }, save: function SavePlaceholderTest( { attributes } ) { const blockProps = useBlockProps.save( { className: 'placeholder-test' } ); const { content } = attributes; return ( ); }, }; ```

Browser console version

```js wp.blocks.registerBlockType( 'atimmer/placeholder-test', { apiVersion: 2, title: 'Placeholder test', attributes: { content: { type: 'string', source: 'html', selector: '.placeholder-test__content', }, }, edit: function EditPlaceholderTest( { attributes, setAttributes } ) { const blockProps = wp.blockEditor.useBlockProps( { className: 'placeholder-test' } ); const { content } = attributes; return wp.element.createElement( wp.blockEditor.RichText, { ...blockProps, keepPlaceholderOnFocus: true, placeholder: 'Write in RichText', value: content, onChange: content => setAttributes( { content } ), } ); }, save: function SavePlaceholderTest( { attributes } ) { const blockProps = wp.blockEditor.useBlockProps.save( { className: 'placeholder-test' } ); const { content } = attributes; return wp.element.createElement( wp.blockEditor.RichText, { ...blockProps, value: content, } ); }, } ); ```

1. Register the above block with your preferred Webpack solution.
2. Insert the above block in your post/page
3. Click on the RichText ("Write in RichText" placeholder)
4. The caret is now not shown anywhere.

• Sometimes I can make the caret appear by clicking again, sometimes I can't.
• What helps with reproducing is focusing another block, or a RichText inside another block and then trying step 3. again
• It might be that this occurs more often with more complicated blocks. However, because I can replicate this with a very simple block I feel like it is a Gutenberg bug.
• It seems a little easier to reproduce on Firefox as compared to Vivaldi. One trick that seems to be able to reproduce it is clicking to the left from the block list container.

Expected behaviour

I expected the caret to always be shown.

Actual behaviour

The caret is not consistently shown.

Screenshots or screen recording (optional)

In the screen recording you can see that it rarely doesn't happen. And that when I click a second time it does show the caret. I have found that with more complex setups (more styling), the second click doesn't necessarily show the caret. So this is a bug present in Gutenberg core, but exacerbated by more CSS.

Code snippet (optional)

WordPress information

• WordPress version: 5.7.0
• Gutenberg version: Not installed
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? Yes

Device information

• Device: Desktop
• Operating system: macOS
• Browser: Firefox 88.0 and Vivaldi 3.7.2218.55.

[johnstonphilip]

Fwiw, that prop seems to have been removed at some point. It doesn't show up in the code anymore: https://github.com/WordPress/gutenberg/search?q=keepPlaceholderOnFocus

It appears it was accidentally removed at some point, and then re-added: https://github.com/WordPress/gutenberg/pull/17439

But I don't see it at all in the code today: https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/rich-text/index.js

I am also getting this error on some older block code in the console: react-dom.860550b4.js:61 Warning: React does not recognize thekeepPlaceholderOnFocusprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercasekeepplaceholderonfocusinstead. If you accidentally passed it from a parent component, remove it from the DOM element.

[ellatrix]

The prop has been remove because we now always keep the placeholder on focus.

[ellatrix]

Is this still an issue? I can't seem to reproduce in Firefox.