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

Fix backward typing bug in Safari by ensuring the selection is removed on blur #4324

Merged

Conversation

clauderic
Copy link
Collaborator

Description
Safari doesn't always remove the selection, even if the contenteditable element no longer has focus. In this scenario, we need to forcefully remove the selection on blur https://stackoverflow.com/questions/12353247/force-contenteditable-div-to-stop-accepting-input-after-it-loses-focus-under-web

Issue
I could not find any open issues related to this specific bug. There are other issues open with regards to backwards typing bugs but they are unrelated.

Example

To replicate, I simply added a button in the toolbar that calls ReactEditor.blur(editor) when clicked:

Safari.backwards.typing.bug.-.Before.mp4
Safari.backwards.typing.bug.-.After.mp4

Checks

  • The new code matches the existing patterns and styles.
  • The tests pass with yarn test.
  • The linter passes with yarn lint. (Fix errors with yarn fix.)
  • The relevant examples still work. (Run examples with yarn start.)
  • You've added a changeset if changing functionality. (Add one with yarn changeset add.)

…d on blur

Safari doesn't always remove the selection, even if the contenteditable element no longer has focus. In this scenario, we need to forcefully remove the selection on blur https://stackoverflow.com/questions/12353247/force-contenteditable-div-to-stop-accepting-input-after-it-loses-focus-under-web
@changeset-bot
Copy link

changeset-bot bot commented Jun 7, 2021

🦋 Changeset detected

Latest commit: 5189402

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
slate-react Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@@ -560,8 +560,6 @@ export const Editable = (props: EditableProps) => {
return
}

const window = ReactEditor.getWindow(editor)
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line was unused so I took the liberty of deleting it

@clauderic clauderic self-assigned this Jun 7, 2021
@clauderic clauderic added the bug label Jun 7, 2021
@clauderic clauderic force-pushed the fix-safari-backwards-typing branch from 69b51d2 to 5189402 Compare June 7, 2021 19:18
@clauderic clauderic merged commit 61171a2 into ianstormtaylor:main Jun 7, 2021
@clauderic clauderic deleted the fix-safari-backwards-typing branch June 7, 2021 19:25
@github-actions github-actions bot mentioned this pull request Jun 7, 2021
dylans pushed a commit to dylans/slate that referenced this pull request Sep 13, 2021
…d on blur (ianstormtaylor#4324)

Safari doesn't always remove the selection, even if the contenteditable element no longer has focus. In this scenario, we need to forcefully remove the selection on blur https://stackoverflow.com/questions/12353247/force-contenteditable-div-to-stop-accepting-input-after-it-loses-focus-under-web
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant