Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cursor is hidden in inline RichText elements with background-color #7575

Closed
mirka opened this issue Jun 27, 2018 · 3 comments
Closed

Cursor is hidden in inline RichText elements with background-color #7575

mirka opened this issue Jun 27, 2018 · 3 comments
Labels
[Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable

Comments

@mirka
Copy link
Member

mirka commented Jun 27, 2018

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:
chrome

Safari:
safari

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

@designsimply
Copy link
Member

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>

@designsimply designsimply added the [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable label Jun 27, 2018
@mirka
Copy link
Member Author

mirka commented Jun 27, 2018

@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

@mirka mirka mentioned this issue Jun 27, 2018
11 tasks
@ellatrix
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable
Projects
None yet
Development

No branches or pull requests

3 participants