Autofocus Text puts cursor at end instead of beginning

[Matthew-Goldberg]

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

What is the current behavior? In React 16, a text input with a value and autofocus will set the cursor at the end of the input. <input autoFocus={true} type="text" defaultValue="4444" />

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

See the React 16 repro here: https://codepen.io/matthewg0/pen/XymjYo

What is the expected behavior? In React 15, and in plain HTML, the behavior is that the cursor is placed at the start of the input. React 15: https://codepen.io/matthewg0/pen/NEGRzv Plain HTML: https://codepen.io/matthewg0/pen/wQKoap

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? Reproduces as of React 16. Worked as expected in React 15.

[gaearon]

Want to look into a fix?

[Matthew-Goldberg]

Sure thing, thanks for confirming. I'll look into it.

[mmarkelov]

@Matthew-Goldberg I just tried to figure out what is wrong with it, but I don't have any ideas with it. So if you stack on it - you could try this - works in all modern browsers

[heyimalex]

Just to narrow it down, v16.2.0 works and v16.3.0 doesn't, so it's somewhere in there.

[chasestarr]

bisected to this commit

[Matthew-Goldberg]

Thank you @chasestarr that makes sense. It also happens in plain HTML the cursor will be at the end if you set the value using script input.value = 'something' instead of attribute <input value="something"

[Matthew-Goldberg]

@mmarkelov I think this will be hard to write a test, it seems jsdom is showing that the selectionStart is 0 even though in the browser the same code shows selectionStart is the end/length of the text value.

[Matthew-Goldberg]

OK the jsdom issue is now fixed: https://github.com/jsdom/jsdom/pull/2799 When that is released we can upgrade the jsdom version to pick up the fix, and re-implement the test which should now be useful.

[bl00mber]

(#14171) Strictly speaking it looks like a feature rather than a bug because it is reasonable to place cursor at the end of input to use backspace immediately

[xrutayisire]

(#14171) Strictly speaking it looks like a feature rather than a bug because it is reasonable to place cursor at the end of input to use backspace immediately

Hum, for me it depends on the use case. But the thing is in React 16 the behavior changed without any info about it, so for me it's just a regression until it's proven that it's the desired effect for most use cases.

[reme3d2y]

Will this be fixed?

Now this causes inconsistent autofocus behavior on inputs with and without SSR When using server-side rendering (SSR) and hydrating the application, the caret in an input field after autofocus is placed at the beginning of the input. However, during client-side rendering without SSR or after remounting the component, the caret is placed at the end of the input. This differs from the behavior of a native HTML input, which always places the caret at the beginning