question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Safari: selection becomes null when editor blurs

See original GitHub issue

In Safari the editor selection becomes null when the editor is blurred. However in Chrome & Firefox, the selection is preserved when the editor blurs.

Chrome

https://user-images.githubusercontent.com/25709855/125637734-aa1621da-41dc-4020-820b-4f1eaf30ac64.mp4

Firefox

https://user-images.githubusercontent.com/25709855/125637787-15b43f99-af22-4fa5-b54e-ecef64af6f00.mp4

Safari

https://user-images.githubusercontent.com/25709855/125637827-b2c47db7-9338-4076-b825-8f3c2b02f62c.mp4

Sandbox

Steps

  1. Go to Sandbox
  2. Select some text from the editor.
  3. Click the button Bold. To make the text bold.
  4. Works in Chrome & Firefox. Fails in Safari.

Expectation

Expected behavior is get similar output for editor.selection across browsers when the editor blurs. In this case the selection is preserved for Chrome & Firefox but becomes null in Safari.

Environment

  • Slate Version: [0.63.0]
  • Slate React Version: [0.65.2]
  • Operating System: [macOS]
  • Browser: [Chrome, Safari,Firefox]

Cause of this issue can be #4324, where to fix a backward typing bug in Safari. Safari specific code was added to make sure the selection becomes null when editor is blurred.

Issue Analytics

  • State:open
  • Created 2 years ago
  • Comments:9

github_iconTop GitHub Comments

2reactions
Harsh1796commented, Jul 27, 2021

@jamestowers I am using an older version to prevent the null selection issue and maintain a similar behaviour in all browsers for my use case.

1reaction
Harsh1796commented, Jul 27, 2021

@jamestowers I am also using React.focusEditor to get around the backward typings bug in Safari. But I have to use an older version of slate-react v0.65.0 to get similar behaviour in all browsers.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Selection is null after editor loses focus · Issue #3412 - GitHub
Current behavior is that when you click into the toolbar or out of the document the editor's selection becomes null.
Read more >
Safari Technology Preview Release Notes - Apple Developer
Open tabs are blank on initial launch after upgrading to Safari Technology Preview 87 and loading all tabs from the last session. To...
Read more >
Prevent firing the blur event if any one of its children receives ...
Since the click event fires after the blur, there is no (cross-browser, reliable) way to tell what element is gaining focus. Mousedown, however ......
Read more >
Selection - Web APIs - MDN Web Docs - Mozilla
Chrome Edge Fir... Selection Full support. Chrome1. Toggle history Full support. Edge12. Toggle history Fu... addRange Full support. Chrome1. Toggle history Full support. Edge12. Toggle...
Read more >
Focusing: focus/blur - The Modern JavaScript Tutorial
The focus event is called on focusing, and blur – when the element ... can interact with: <button> , <input> , <select> ,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found