Selection is null after editor loses focus

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.

[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.

[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?