TextInput cursor position gets reset when text is changed

[qmatteoq]

Environment

Run the following in your terminal and copy the results here.

1. npx react-native --version:
   4.13.1
2. npx react-native info:

System:
OS: Windows 10 10.0.19042
CPU: (8) x64 Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz
Memory: 1.92 GB / 15.60 GB
Binaries:
Node: 12.9.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.10.2 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK:
AllowDevelopmentWithoutDevLicense: Enabled
AllowAllTrustedApps: Enabled
Versions: 10.0.14393.0, 10.0.15063.0, 10.0.17763.0, 10.0.18362.0, 10.0.19041.0
IDEs:
Android Studio: Not Found
Visual Studio: 16.8.30804.86 (Visual Studio Enterprise 2019), 16.9.30803.129 (Visual Studio Enterprise 2019)
Languages:
Java: Not Found
Python: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.2 => 0.63.2
react-native-windows: ^0.63.0-0 => 0.63.12
npmGlobalPackages:
react-native: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Define a function to store a string property:

const [title, setTitle] = useState('');

2. Define a function which takes a string in input and converts it into uppercase:

const changeToUppercase= (value) => {
  var newValue = value.toUpperCase();    
  setTitle(newValue);
}

3. Add a TextInput control and connect the onChangeText event to the changeToUppercase function. Connect also the value property to the one stored in the state and changed by the function.

<TextInput onChangeText={changeToUppercase} value={title} />

Expected Results

Whenever you type something in the TextInput, its value becomes uppercase and the cursor is kept at the end of the text, so that you can continue writing.
Instead, the cursor is reset at the first position every time the onChangeText event is triggered, making impossible to continue writing.

Snack, code example, screenshot, or link to a repository:

import React, {useState} from 'react';
import {
  View,
  TextInput,
} from 'react-native';

const App: () => React$Node = () => {

const [title, setTitle] = useState('');

const changeToUppercase = (value) => {
  var newValue = value.toUpperCase();    
  setTitle(newValue);
}

  return (
    <View>
      <TextInput onChangeText={changeToUppercase} value={title} />
    </View>
  );
};

export default App;

Many of our core react-native-windows contributors are taking some much needed vacation throughout December 2020. Thank you for being patient while we relax, recharge, and return to a normal responsiveness in January 2021. In the meantime feel free to continue to pose questions, open issues, and make feature requests - you just may not get a response right away.

[chrisglein]

Looks like the same as #5687.
Given that this one has a repro and such I'll dupe the other one to this one.

[rectified95]

I think this is because of the way XAML behaves when setting TextBox.Text() programmatically.
I've created a plain XAML app that updates the contents of a TextBox in response to a button click, and the cursor also gets moved to the beginning, no matter where it was before the update.
(Toggling focus between the button and textbox preserves cursor position, so this is not caused by clicking outside the textbox.)

[rectified95]

Seems like we need to deviate from the native behavior here as it blocks some dynamic text replacement scenarios. Will try to work around it.