Ask questionsBug: cursor jumps to end of controlled <input> tag when value is modified

React version: 16.13.1

Steps To Reproduce

  1. Make an <input> tag controlled, by setting its value in response to onChange
  2. Apply a transformation to the value (for example, replace spaces with underscores)
  3. Move cursor to the middle of the text and edit it

Link to code example:

Adapted from CodePen example ( on

The current behavior

If the transformation changes the value, the cursor is moved to the end of the input.

The expected behavior

Cursor should remain at the original position if possible (this is the behaviour of the TextInput component in React Native).


Answer questions vkurchatkin

But React doesn't provide that low-level access (by design).

Well, that's where you are wrong. It's not that hard to implement this in React. Here is a demo:


Related questions

Disable react strict mode on third party libraries hot 6
Refs - &#34;object is not extensible&#34; hot 4
Warning: Unknown DOM property for. Did you mean htmlFor? hot 4
React@16.9 block `javascript:void(0);` hot 4
TypeError: Object(...) is not a function hot 3
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table> hot 3
React custom hook "Should have a queue. This is likely a bug in React" error message. hot 2
useEffect causes 'callback is not a function' exception hot 2
DevTools: Updating state or props in devtools does not trigger component update. hot 2
Infinite loop in useEffect using blank object or array hot 2
False-positive security precaution warning (`javascript:` URLs) hot 2
Hooks API - hook breaks when exported from module hot 2
Function components do not support contextType. hot 2
Feedback on useEffect depndencies change error hot 2
[ESLint] Feedback for 'exhaustive-deps' lint rule hot 2
Github User Rank List