diff --git a/.changeset/safari-backwards-typing.md b/.changeset/safari-backwards-typing.md new file mode 100644 index 000000000..e603fb60e --- /dev/null +++ b/.changeset/safari-backwards-typing.md @@ -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 diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx index 80280987a..c61b8eb91 100644 --- a/packages/slate-react/src/components/editable.tsx +++ b/packages/slate-react/src/components/editable.tsx @@ -560,8 +560,6 @@ export const Editable = (props: EditableProps) => { return } - const window = ReactEditor.getWindow(editor) - // COMPAT: If the current `activeElement` is still the previous // one, this is due to the window being blurred when the tab // 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) }, [readOnly, attributes.onBlur]