From f1d1ceb3fe53dda57183eef346e5cc0915fb88b2 Mon Sep 17 00:00:00 2001 From: GrinchakAndrew Date: Sat, 27 Nov 2021 21:04:30 +0200 Subject: [PATCH 1/5] Update editable.tsx: auto-focus fix for end of line with several children for input div Update editable.tsx: auto-focus fix for end of line with several children for input div --- .../slate-react/src/components/editable.tsx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx index ac99add80f..4f50c24200 100644 --- a/packages/slate-react/src/components/editable.tsx +++ b/packages/slate-react/src/components/editable.tsx @@ -250,10 +250,20 @@ export const Editable = (props: EditableProps) => { // The autoFocus TextareaHTMLAttribute doesn't do anything on a div, so it // needs to be manually focused. useEffect(() => { - if (ref.current && autoFocus) { - ref.current.focus() - } - }, [autoFocus]) + if (ref.current && autoFocus) { + if(window.getSelection && document.createRange) { + const range = document.createRange(); + node.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); + } + else + 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 From 45077f69c3192732157ee38b94544ef57178f469 Mon Sep 17 00:00:00 2001 From: GrinchakAndrew Date: Mon, 29 Nov 2021 11:53:40 +0200 Subject: [PATCH 2/5] tweak node to ref.current --- packages/slate-react/src/components/editable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx index 4f50c24200..28fe01280b 100644 --- a/packages/slate-react/src/components/editable.tsx +++ b/packages/slate-react/src/components/editable.tsx @@ -253,7 +253,7 @@ export const Editable = (props: EditableProps) => { if (ref.current && autoFocus) { if(window.getSelection && document.createRange) { const range = document.createRange(); - node.focus(); + ref.current.focus(); range.setStart(ref.current, ref.current.childNodes.length); range.setEnd(ref.current, ref.current.childNodes.length); const sel = window.getSelection(); From d88f2eeb2e8d60945d7124baeaa5c663a9ceb59f Mon Sep 17 00:00:00 2001 From: Dylan Schiemann Date: Tue, 11 Jan 2022 15:41:10 +0000 Subject: [PATCH 3/5] Update packages/slate-react/src/components/editable.tsx --- packages/slate-react/src/components/editable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx index 28fe01280b..bfc2d8e241 100644 --- a/packages/slate-react/src/components/editable.tsx +++ b/packages/slate-react/src/components/editable.tsx @@ -251,7 +251,7 @@ export const Editable = (props: EditableProps) => { // needs to be manually focused. useEffect(() => { if (ref.current && autoFocus) { - if(window.getSelection && document.createRange) { + if (window.getSelection && document.createRange) { const range = document.createRange(); ref.current.focus(); range.setStart(ref.current, ref.current.childNodes.length); From 6f2e3428a939d699c7097735f69acb3a4b1662a4 Mon Sep 17 00:00:00 2001 From: Dylan Schiemann Date: Tue, 11 Jan 2022 08:51:19 -0700 Subject: [PATCH 4/5] Update editable.tsx * Run prettier * Null checks for selection --- .../slate-react/src/components/editable.tsx | 26 +++++++++---------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx index bfc2d8e241..c885e052d3 100644 --- a/packages/slate-react/src/components/editable.tsx +++ b/packages/slate-react/src/components/editable.tsx @@ -250,20 +250,18 @@ export const Editable = (props: EditableProps) => { // 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); - } - else - ref.current.focus(); - } - }, [autoFocus]) + 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) + } else 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 From 012ae90a75eb13253d98245bd5e05a8a6881d525 Mon Sep 17 00:00:00 2001 From: Dylan Schiemann Date: Tue, 11 Jan 2022 08:52:50 -0700 Subject: [PATCH 5/5] Add changeset --- .changeset/breezy-mice-run.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/breezy-mice-run.md 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