Slate: .focus() doesn't work

Created on 14 Apr 2018  路  5Comments  路  Source: ianstormtaylor/slate

Bug Report

What's the current behavior?

ezgif-1-b8c62dfb7f-1

firing .focus() doesn't revert to previous selection, or even focus the editor.

code sample: https://codesandbox.io/s/13r8qmv0l3 (see: line 113)

Made a simple change to slate example code, removing event.preventDefault() from buttons (to lose focus) and then run .focus(). Found while trying to set link hrefs from a custom dialog popup, with no success.

What's the expected behavior?

Previous selection/highlight should be retained after firing .focus()

question

Most helpful comment

@afrankel-sfdo @Slapbox

editor.focus(), being an imperative command that does not directly affect the state, ends up being in conflict with the React lifecycle, which renders the Editor and its focus based on what's in the state. in the code sample given originally, if you call this.editor.focus() outside of the React lifecycle (like if you wrap it in a setTimeout()), you'll find that it works as expected. but if you try to do so synchronously, React will go ahead and re-render over that, based on the state, which is unfocused

All 5 comments

It's not supposed to save the selection state, in line with Slate's goal to be agnostic about such things. You can re-select the previous state by saving the selection properties from the previous value and re-applying them via onChange when onFocus fires. If you don't have an onFocus on the editor already, you will need to add one to help handle this.

I see, misunderstanding on my part about the selection, but shouldn't it at least show a cursor given focus() => Void Programmatically focus the editor., or does that also need to be explicitly set onFocus ?

You would think so... Right now I'm having the same exact problem. I don't think I was in Slate 32. Who knows though, I've burned myself out trying to resolve this today so everything in here should be taken with a grain of salt.

You can try using this to focus, but it doesn't work for me on an empty editor... nothing does...

this.onChange(value.change().focus().value)

@afrankel-sfdo @Slapbox

editor.focus(), being an imperative command that does not directly affect the state, ends up being in conflict with the React lifecycle, which renders the Editor and its focus based on what's in the state. in the code sample given originally, if you call this.editor.focus() outside of the React lifecycle (like if you wrap it in a setTimeout()), you'll find that it works as expected. but if you try to do so synchronously, React will go ahead and re-render over that, based on the state, which is unfocused

Hey, thanks for using Slate! Unfortunately, we can't offer support for usage questions in the issues here because it becomes overwhelming to maintain the project if the issues are filled with questions.

However, we do have a Slack channel and people are constantly asking and answering questions in there. So I'm going to close this issue, but I definitely recommend joining the Slack channel if you want to find people that might be able to help.

Thanks for understanding!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ianstormtaylor picture ianstormtaylor  路  3Comments

bunterWolf picture bunterWolf  路  3Comments

chrpeter picture chrpeter  路  3Comments

ezakto picture ezakto  路  3Comments

varoot picture varoot  路  3Comments