Ask questionsBug: cursor jumps to end of controlled <input> tag when value is modified
React version: 16.13.1
<input>tag controlled, by setting its
valuein response to
Link to code example:
Adapted from CodePen example (https://codepen.io/gaearon/pen/VmmPgp?editors=0010) on https://reactjs.org/docs/forms.html
If the transformation changes the value, the cursor is moved to the end of the input.
Cursor should remain at the original position if possible (this is the behaviour of the
TextInput component in React Native).
Answer questions vkurchatkin
Is this something that could/should be added as default behavior for the <input> component?
I think it is a bit against React philosophy. React is about making DOM transformations declarative, not about changing how it works. If you need such behaviour, you can make your own
<Input/> component which does just that (or more).
The example in the documentation would benefit from this.
I agree, there probably should be a warning in the docs explaining that it's not as _ straightforward_ to modify input this way.
If you modify your handleChange function to the following, it should work as expected.
No, your modified code is strictly equivalent to original code. What you can't do is use the event object asynchronously, including
setState(() => ...) form, without calling