diff --git a/.changeset/breezy-mice-run.md b/.changeset/breezy-mice-run.md new file mode 100644 index 0000000000..27a4d4d5b9 --- /dev/null +++ b/.changeset/breezy-mice-run.md @@ -0,0 +1,5 @@ +--- +'slate-react: patch +--- + +Update editable.tsx: auto-focus fix for end of line with several children diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx index 093b703304..2df5dcd03f 100644 --- a/packages/slate-react/src/components/editable.tsx +++ b/packages/slate-react/src/components/editable.tsx @@ -336,6 +336,34 @@ export const Editable = (props: EditableProps) => { hasDomSelectionInEditor = true } + state.isUpdatingSelection = false + }) + }) + + // The autoFocus TextareaHTMLAttribute doesn't do anything on a div, so it + // needs to be manually focused. + useEffect(() => { + if (ref.current && autoFocus) { + if (window.getSelection && document.createRange) { + const range = document.createRange() + ref.current.focus() + range.setStart(ref.current, ref.current.childNodes.length) + range.setEnd(ref.current, ref.current.childNodes.length) + const sel = window.getSelection() + sel?.removeAllRanges() + sel?.addRange(range) + } + ref.current.focus() + } + }, [autoFocus]) + + // Listen on the native `selectionchange` event to be able to update any time + // the selection changes. This is required because React's `onSelect` is leaky + // and non-standard so it doesn't fire until after a selection has been + // released. This causes issues in situations where another change happens + // while a selection is being dragged. + const onDOMSelectionChange = useCallback( + throttle(() => { // If the DOM selection is in the editor and the editor selection is already correct, we're done. if ( hasDomSelection &&