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

Rich Text: Add missing keep placeholder on focus prop. #17439

Merged

Conversation

@epiqueras
Copy link
Contributor

commented Sep 14, 2019

Closes #17405

Description

This PR fixes backwards compatibility issues that came with the unintentional removal of the keepPlaceholderOnFocus prop in RichText.

It does this by adding the prop back in.

How has this been tested?

It was verified that setting the keepPlaceholderOnFocus prop to true makes the placeholder still show when selected/focused without content.

Types of Changes

Bug Fix: Fix backwards compatibility issues arising from accidentally removing the keepPlaceholderOnFocus prop from RichText.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
@@ -336,6 +336,7 @@ class RichTextWrapper extends Component {
didAutomaticChange,
undo,
placeholder,
keepPlaceholderOnFocus,

This comment has been minimized.

Copy link
@gziolo

gziolo Sep 14, 2019

Member

Should we include the deprecation message?

This comment has been minimized.

Copy link
@epiqueras

epiqueras Sep 14, 2019

Author Contributor

We are not actually deprecating this one.

This comment has been minimized.

Copy link
@gziolo

gziolo Sep 15, 2019

Member

We need to restore documentation then.

This comment has been minimized.

Copy link
@epiqueras

epiqueras Sep 15, 2019

Author Contributor
display: none;
&.is-selected {
&.keep-placeholder-on-focus [data-rich-text-placeholder] {
pointer-events: none;

This comment has been minimized.

Copy link
@gziolo

gziolo Sep 14, 2019

Member

Will it display a different cursor icon? I guess, it still needs to be overridden.

This comment has been minimized.

Copy link
@epiqueras

epiqueras Sep 14, 2019

Author Contributor

It shows the same one for me.

This comment has been minimized.

Copy link
@ellatrix

ellatrix Sep 15, 2019

Member

Why does this rule need to be added? Is the one above not enough on :after?

This comment has been minimized.

Copy link
@epiqueras

epiqueras Sep 15, 2019

Author Contributor

It's needed so that you can select/see the caret through the placeholder.

@ellatrix

This comment has been minimized.

Copy link
Member

commented Sep 15, 2019

… on the span instead of on the pseudo element
@ellatrix

This comment has been minimized.

Copy link
Member

commented Sep 15, 2019

I see one small issue: when the placeholder is kept on focus and you click on it, there is no caret visible. You can still type though. I see that the browser selection is somewhere after the placeholder, so we could enforce selection to be in the placeholder text element. Let's look at this separately.

@epiqueras

This comment has been minimized.

Copy link
Contributor Author

commented Sep 15, 2019

Sounds good, thanks for taking a look at this!

@epiqueras epiqueras merged commit 4f115c7 into master Sep 15, 2019
4 of 7 checks passed
4 of 7 checks passed
pull-request-automation
Details
Header rules - gutenberg-playground No header rules processed
Details
Pages changed - gutenberg-playground 5 new files uploaded
Details
Redirect rules - gutenberg-playground No redirect rules processed
Details
Mixed content - gutenberg-playground No mixed content detected
Details
Travis CI - Pull Request Build Passed
Details
netlify/gutenberg-playground/deploy-preview Deploy preview ready!
Details
@epiqueras epiqueras deleted the fix/rich-text-missing-keep-placeholder-on-focus-prop branch Sep 15, 2019
@afercia

This comment has been minimized.

Copy link
Contributor

commented Sep 16, 2019

I see one small issue: when the placeholder is kept on focus and you click on it, there is no caret visible. You can still type though. I see that the browser selection is somewhere after the placeholder, so we could enforce selection to be in the placeholder text element. Let's look at this separately.

This was also noted on #16733 (comment)

When keepPlaceholderOnFocus is true, the editable is partially non-clickable, because the click actually happens on the new <span> .

@ellatrix

This comment has been minimized.

Copy link
Member

commented Sep 16, 2019

When keepPlaceholderOnFocus is true, the editable is partially non-clickable, because the click actually happens on the new <span> .

I'm a bit confused. If the placeholder (the span element) is not clickable, how can the click happen on the span element?

I think the placeholder should be ignored/"invisible" for clicks, and instead fall in the parent element. I'll have a look to fix this. In the meantime it might be worth creating a separate tracking issue for it.

@afercia

This comment has been minimized.

Copy link
Contributor

commented Sep 16, 2019

I'm a bit confused. If the placeholder (the span element) is not clickable, how can the click happen on the span element?

Language barriers 🙂 I mean it's not possible to click the field because the <span> sit on top of the field. I think this was fixed in #17439 by using pointer-events: none ?

@ellatrix

This comment has been minimized.

Copy link
Member

commented Sep 16, 2019

Yes, it should be fixed by this PR right?

@ellatrix

This comment has been minimized.

Copy link
Member

commented Sep 16, 2019

The only remaining issue I see is that the caret is hidden after the placeholder is clicked. It seems to be positioned after the placeholder instead of the text node before.

@ellatrix

This comment has been minimized.

Copy link
Member

commented Sep 16, 2019

Btw, this seems to work fine in Safari. In Chrome the caret becomes invisible.

@ellatrix ellatrix referenced this pull request Sep 16, 2019
5 of 5 tasks complete
dd32 pushed a commit to dd32/gutenberg that referenced this pull request Sep 27, 2019
* Rich Text: Add missing keep placeholder on focus prop.

* Use text cursor for the placeholder

* Turns out the cursor prop is not needed if the pointer-events prop is on the span instead of on the pseudo element
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.