Should TextInput cursor movement better match other platforms? #7283
Description
Steps To Reproduce
Provide a detailed list of steps that reproduce the issue.
- Create an example where JS updates the TextInput setValue prop, e.g.:
const [text, setText] = useState('');
<TextInput
value={text}
onChangeText={text => {
const text = text.replace('aa', 'bbbb');
setText(text);
}}
/>
- Type the string that will trigger JS modifying the string.
- Cursor position stays constant
Expected Results
This is where things get tricky. The behavior is pretty much undefined, but there is one thing that's consistent across platforms: if my cursor is at the end of the TextInput value and the value gets longer, my cursor will still be at the end of the TextInput.
Things differ across platforms when your cursor is not at the end of the text:
Android: the cursor position relative to the TextInput length is fixed
iOS: the cursor position always goes to the end of the TextInput value if the value length changes
Web: the cursor position always goes to the end of the TextInput value if the value length changes
Or in pseudo-code:
Android: newPosition = prevPosition / prevLength * newLength
iOS: newPosition = newLength == prevLength ? prevPosition : newLength
Web: newPosition = newLength == prevLength ? prevPosition : newLength
I suspect that a good user experience or default is to at least match iOS and Web behavior, as I imagine some very large proportion of programmatic edits to TextInput values will occur when the cursor is at the end of the string.