Gutenberg: Cursor is hidden in inline RichText elements with background-color

[mirka]

Describe the bug
The blinking text cursor (caret) does not appear when the RichText is an inline element, and a non-transparent background color is set.

To Reproduce

// Cursor is hidden
<RichText
  tagName="span"
  style={{ backgroundColor: 'yellow' }}
  value="RichText span (inline)"
/>

// Cursor appears
<RichText
  tagName="span"
  style={{ backgroundColor: 'yellow', display: 'inline-block' }}
  value="RichText span (inline-block)"
/>

Expected behavior
Cursor should appear, or the limitation should be documented.

Screenshots
Chrome:

Safari:

In Safari you can see that the cursor is hidden underneath. Indeed, the cursor is visible when background-color: transparent.

[designsimply]

Apologies, is this something I can test with a core block or are you creating a new block?

I tried testing by adding Custom HTML block with the following HTML but I'm almost certain I'm not testing correctly.

<span style="background-color: yellow;">test span</span>

[mirka]

@designsimply Thanks for testing!

Yes, to test, I believe you'd have to register a new block. Or if you have a local dev environment set up, a quick way would be to overwrite the code of an existing core block (like in here).

You can also kind of simulate the behavior without doing either of the above, if you:

1. Add a Button block in the Gutenberg editor
2. Type in some text for the button
3. Use the DevTools/WebInspector in your browser to inspect the button
4. Disable the display: inline-block rule for .wp-block-button .wp-block-button__link
5. Cursor is gone

[ellatrix]

You cannot use a span as a tagName for RichText. See #11839.