🐛 focus() sets cursor at the beginning of all text

[MichaelDeBoey]

What is the current behavior?
When focussing the editor (using focus()), the cursor is shown at the beginning of all text.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.
https://codesandbox.io/s/draft-js-focus-bug-ntsry?file=/src/RichTextEditor.tsx

What is the expected behavior?
When focussing the editor, the cursor should be at the end of all text.

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?
I'm using latest version of draft-js (0.11.6) on both Google Chrome & Safari.

[mukeshsoni]

Where does it say that focus() should put cursor to end of all text? I have been using draft-js from some time now and this has been the default behavior.

[stefan-krajnik]

@MichaelDeBoey I think what would be better is to have the SelectionState set to the end of the document by default but it may cause other issues as well, why don't you set the selection manually in the useEffect func ?

[MichaelDeBoey]

@mukeshsoni It's not document somewhere, but that's just the behavior I was expecting when doing a focus() call.
If you look at the sandbox it's weird to have the cursor at the beginning when there's already text in the Editor and you do a focus() call imo.

@stefan-krajnik I can't see any problems this could cause tbh.
Setting SelectionState is indeed an alternative I could do, but I still think it should be the default behavior when calling focus(), hence my bug report.

[mukeshsoni]

Got it. Depends on the kind of application you make, i guess. It works perfectly for my application. And i guess if any editor has a lot of content, taking them to the end of that document might be weird. Think about any editor which takes you to end of file when you focus the editor.

[MichaelDeBoey]

@mukeshsoni @stefan-krajnik How would you guys set SelectionState as an alternative solution to making it the default for focus()?

[MichaelDeBoey]

I tried using moveFocusToEnd as an alternative and that's doing what I want it to do. 🥳🎉
https://codesandbox.io/s/draft-js-focus-bug-alternative-fix-8x8g9

I'm still convinced this should be the default behavior of the focus() call, so I'm keeping this one open

[stefan-krajnik]

@MichaelDeBoey function which is creating initial editor state should set SelectionState so it has focus at the end. The reason why it shouldn't be hidden in .focus() function is that it should do exactly what is says not to change your current selection state. You might focus/blur programatically but you want to persist the SelectionState.

[MichaelDeBoey]

@stefan-krajnik What you're saying seems indeed a better solution I think
In that case EditorState.createWithContent should put the cursor at the end of the text

[stefan-krajnik]

@MichaelDeBoey Yep something like that, but maybe if EditorState.createWithContent had an argument for cursor location would be even better, as I mentioned already, there might be cases where you want to keep your current selection. But still you can do it using multiple commands

[rugggger]

@MichaelDeBoey I looked at your codesandbox example and I don't see that the cursor appears at the end of the text.
Does anyone have a working example of focusing to the editor and the cursor appearing at the end ?

[rugggger]

@mukeshsoni when I use an older version of draftjs , the cursor returns to the last position where it was. It's only on version 0.11 that is changes and returns to the beginning.
You can see it in https://codepen.io/rugggger/pen/yLOYRWe - change the draftjs script to 10 and you will see it is a different behaviour.

[MichaelDeBoey]

I don't see that the cursor appears at the end of the text.

@rugggger That's the whole point, I think it should appear at the end but it doesn't.
https://ntsry.csb.app

[rugggger]

@MichaelDeBoey

I tried using moveFocusToEnd as an alternative and that's doing what I want it to do. 🥳🎉

But how did you manage to use moveFocusToEnd to fix it ?
I managed to use this function only when I call it for button onClick callback. Not when changing focus unto the editor using tab.

[MichaelDeBoey]

@rugggger Check out the CodeSandbox: https://codesandbox.io/s/draft-js-focus-bug-alternative-fix-8x8g9
It worked for my use-case

[rugggger]

@MichaelDeBoey I did check it. What I see is that clicking inside the editor sets the cursor where I clicked. And shifting focus using tab sets the cursor at the beginning. Am I missing something ? In which scenario do you set the cursor at the end ?