Selection is null after editor loses focus

[cboppert]

Do you want to request a feature or report a bug?

Bug

What's the current behavior?

Current behavior is that when you click into the toolbar or out of the document the editor's selection becomes null.

https://codesandbox.io/s/fervent-bouman-ju71u?fontsize=14&hidenavigation=1&theme=dark

Tested on Firefox, Safari and Chrome although Firefox has different behavior. Firefox sometimes sets the cursor position to the end of the text in the editor depending on how you focus out of the editor.

Slate: 0.57.1
Browser: Chrome / Safari / Firefox
OS: Mac

What's the expected behavior?

Focus out shouldn't erase editor selection.

Changes to Example Site To Produce Behavior

In order to test this we forked the rich text example and made sure the toolbar style buttons did not disable on focus out. Then we used the ReactEditor.focus method in the MarkdownButton component's onMouseDown handler in the richtext.js file.

[Lalitj03]

Similar thing happened when I tried to use dialog box in link example instead of alert. While image upload as well the editor focus loses and the image gets appended at the last node instead of at the cursor location. Is there a way to control or change focus?

[Lalitj03]

Found a work around for this issue thanks to a kind developer on slack channel. Writing here in case anybody needs it. Store the selection value just before the editor loses focus. In my case it was when I clicked on input field, so I stored it just when dialog box opens. Similarly it can be applied to image upload, iframes or any action where editor loses focus.

const editorSelection = useRef(editor.selection);
useEffect(() => {
    if (openDialog) {
        editorSelection.current = editor.selection;
    }
}, [openDialog]);

[Morphexe]

Keeping on this, is there a way to actually keep it selected, as in highligting the text when losing focus ?

[Lalitj03]

Keeping on this, is there a way to actually keep it selected, as in highligting the text when losing focus ?

I don't know if this is a bug or expected behaviour. But here if you have value of selection with you (which is editorSelection.current ) you can pass it down to editor ( editor.selection = editorSelection.current ) before passing editor to Transforms.insertNode or anywhere else. If you want to show the selection, may be try Transforms.setSelection or Transforms.select.

[Morphexe]

Keeping on this, is there a way to actually keep it selected, as in highligting the text when losing focus ?

I don't know if this is a bug or expected behaviour. But here if you have value of selection with you (which is editorSelection.current ) you can pass it down to editor ( editor.selection = editorSelection.current ) before passing editor to Transforms.insertNode or anywhere else. If you want to show the selection, may be try Transforms.setSelection or Transforms.select.

Yeah, I am currently trying to do Transforms.setSelection with the value I got from the onBlur event , cant seem to make it work. Setting the editor.selection does seem to work correctly.

I just need to find a way to highlight this and generalize the onBlur Event.

I have found that this is checking the onSelectChange event from the dom to unselect , so my next thing is going to try to disable the unselection there , I will report back on my findings.

So a quick work around, is to not allow the editor to be unselected - You can either run your own logic, or you can just "monkey patch" Transforms.deselect to be a empty function in the begginging of your app, this worked like a charm, and I can seem where this is actually being used on the internals of Slate apart from Focus/UnFocus. So so far this is my go to solution.
Better scenario would be to actually change Editable to not call deselect via a prop or something, and you woulc manually call deselect ( in case for multiple editors on the same page)

[ryanmitts]

You can get around this issue by setting readOnly to true before opening the link input or focusing outside the editor, and then setting back to false when done.

However, this PR will need to be merged, since readOnly is broken right now.

https://github.com/ianstormtaylor/slate/pull/3388/files

[sunesimonsen]

I also had success with monkey patching Transforms.deselect while my dialog is open, but it feels wrong :-)

[heyitsaamir]

I wrote up a simple HOC using what @Lalitj03 posted if anyone's interested:
https://gist.github.com/heyitsaamir/6089165fe6789eee170b46809cb61fc6

[robertying]

It took me hours debugging before I read this issue and found out setting editor.selection works but not calling editor.setSelection... The API name is confusing, yet the doc does not seem to mention this.

[DianaLease]

I am able to get around this issue by overriding Transforms.deselect with Transforms.deselect = () => {};
Similar to what I assume @Morphexe & @sunesimonsen are doing. However, is there any downside to doing this?

[hanford]

@DianaLease I ran into some issues where the editor could then have it's selection state become out of sync with the content which will end up throwing some hard to debug exceptions

[shvets-sergey]

Here is my solution to this problem:

1. Put command buttons (like "link" on the gif in the first post) out of the <Slate> tag. This is required, so onBlur event will be fired before your button is clicked.
2. Add "onBlur" handler to the <Editable> tag. In that handler save selection to some property on the editor. E.g. blurSelection.
3. Slate sets selection to null after blur, so before executing a command on the editor, you need to set selection to the saved one. Do it with Transforms.select(editor, editor.blurSelection); (blurSelection is the name of a variable from step2.
4. Run your regular command as if a selection was there. Everything will work exactly the same.
5. Bonus: now, since we have selection we can use ReactEditor.focus(editor) to return focus, so users can just continue typing.

Works well for all the basic commands my editor has: lists, numbers, formatting, headers, etc.