Issue resulting in loss of cursor position in controlled inputs isn't fixed

[deser]

In 15.0.1 release I see "Fixed issue resulting in loss of cursor position in controlled inputs.
@spicyj in #6449"

But actually this bug isn't fixed. Please consider this example:
https://jsfiddle.net/2ayxpag4/4/

Steps to reproduce:

1. Input 123
2. Set cursor on 1 position (after 1)
3. Input something and see that cursor is moved to the end

[syranide]

You must not defer updating the value of the input or the selection information will be lost. I.e., it will think you rejected the change and then updated it, at which point there is no apparent place to put the cursor other than at the end.

[deser]

So then which bug was fixed, could you explain?

[gaearon]

The bug that was fixed was related to synchronously updating the input state. This was always supported, and broke in 15.0.0. Asynchronously updating without losing the position was never supported as @syranide noted.

[deser]

Ok, thanks!

[deser]

Sorry but one more question about "You must not defer updating the value of the input or the selection information will be lost": so as all we know setState defers rendering. So my question is why when setState defers rendering cursor isn't lost when I do the same via setTimeout - cursor is lost?

[syranide]

Loosely speaking, setState is not deferring rendering, it's batching updates and executing them immediately when the current React job has finished, there will be no rendering frame in-between. So in a sense, the operation is synchronous with respect to the current rendering frame. setTimeout schedules it for another rendering frame. For all you know setTimeout might execute 10s later and the user has started typing other things in the input field before then. So then 'foobar' does not have any inherent selection information and thus setting the text field to 'foobar' means the only logical place to put the cursor is at the end (or start), whereas when it's done "synchronously" the input field sees that the value produced by the user and its current value (just updated) are the same the next time it renders and it ends up not actually being updated.

[deser]

Thanks for great answer. Now I understand. My last thought is: event when component is rerenderd asynchronously but it's focused I see no problem to set value and preserve cursor. Haven't dug deep but it might work. You may not answer me sorry for taking your time :)