mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-13 18:53:59 +02:00
Code Issues Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Claudéric Demers
2021-06-07 15:25:48 -04:00
committed by GitHub
parent 26f4b2521c
commit 61171a2382
2 changed files with 16 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.changeset/safari-backwards-typing.md Normal file
View File

@@ -0,0 +1,8 @@
---
'slate-react': patch
---
Fix backward typing bug in Safari by ensuring the selection is always removed 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.
Refer to https://stackoverflow.com/questions/12353247/force-contenteditable-div-to-stop-accepting-input-after-it-loses-focus-under-web

10
packages/slate-react/src/components/editable.tsx
View File

@@ -560,8 +560,6 @@ export const Editable = (props: EditableProps) => {
return return
} }
const window = ReactEditor.getWindow(editor)
// COMPAT: If the current `activeElement` is still the previous // COMPAT: If the current `activeElement` is still the previous
// one, this is due to the window being blurred when the tab // one, this is due to the window being blurred when the tab
// itself becomes unfocused, so we want to abort early to allow to // itself becomes unfocused, so we want to abort early to allow to
@@ -605,6 +603,14 @@ export const Editable = (props: EditableProps) => {
} }
} }
// COMPAT: Safari doesn't always remove the selection even if the content-
// editable element no longer has focus. Refer to:
// https://stackoverflow.com/questions/12353247/force-contenteditable-div-to-stop-accepting-input-after-it-loses-focus-under-web
if (IS_SAFARI) {
const domSelection = root.getSelection()
domSelection?.removeAllRanges()
}
IS_FOCUSED.delete(editor) IS_FOCUSED.delete(editor)
}, },
[readOnly, attributes.onBlur] [readOnly, attributes.onBlur]