'selection' prop is not working in TextInput on Android after React Native upgrade to v0.73

[hariomsinha7]

Description

Before React Native upgrade, 'selection' prop was used to set the position of the cursor to the specified position. This used to work for readOnly inputs, pre-filled inputs and even for the inputs where the data is being filled.

After the React Native upgrade to v0.73, it is only working for the scenario where the data is being filled and does not work when the TextInput is readOnly or have some pre-filled data.

Our implementation:

We have used state variable to toggle the selection between {start:0} and 'null'. When input is on focus, set the selection to null and when the input is blurred, change the selection to 0. We have implemented this to always show the input data from starting position. ( In Android, by default, this behaviour does not works, and the input shows the data from end ).

  const [value, onChangeText] = React.useState(
    'This is a prefilled text inside this TextInput. Add more contents and check the selection prop',
  );
  const [selection, setSelection] = useState(
    Platform.OS === 'android' ? {start: 0} : null,
  );
  const handleOnFocus = () => {
    if (Platform.OS === 'android') {
      setSelection(null);
    }
  };
  const handleOnBlur = () => {
    if (Platform.OS === 'android') {
      setSelection({start: 0});
    }
  };

 <SafeAreaView>
      <ScrollView>
        <View style={styles?.container}>
          <Text>{'Text Input with prefilled data'}</Text>
          <TextInput
            onChangeText={text => onChangeText(text)}
            value={value}
            style={{
              padding: 10,
              width: 300,
              borderStartWidth: 1,
              borderEndWidth: 1,
              borderTopWidth: 1,
              boderLeftWidth: 1,
              borderRightWidth: 1,
              borderBottomWidth: 1,
              marginBottom: 10,
              borderRadius: 10,
            }}
            placeholder="Enter long text here..."
            selection={selection}
            onFocus={handleOnFocus}
            onBlur={handleOnBlur}
          />
          <Text>{'Text Input with readOnly data'}</Text>
          <TextInput
            onChangeText={text => onChangeText(text)}
            value={value}
            readOnly
            style={{
              padding: 10,
              width: 300,
              borderStartWidth: 1,
              borderEndWidth: 1,
              borderTopWidth: 1,
              boderLeftWidth: 1,
              borderRightWidth: 1,
              borderBottomWidth: 1,
              marginBottom: 10,
              borderRadius: 10,
              backgroundColor: '#f2f2f2',
            }}
            placeholder="Enter long text here..."
            selection={selection}
            onFocus={handleOnFocus}
            onBlur={handleOnBlur}
          />

          <Text>{'Change input focus here'}</Text>
          <TextInput
            placeholder="Use this to change focus"
            style={{
              padding: 10,
              width: 300,
              borderStartWidth: 1,
              borderEndWidth: 1,
              borderTopWidth: 1,
              boderLeftWidth: 1,
              borderRightWidth: 1,
              borderBottomWidth: 1,
              borderRadius: 10,
            }}
          />
        </View>
      </ScrollView>
    </SafeAreaView>```

**Note: This issue is only coming on Android.**

### Steps to reproduce

1. Clone the attached repo and install dependencies `( npm install )`
2. Run the app on Android simulator `( Pixel 6 Pro API 34 )`
3. In the launch page only, you will see 3 inputs. First input has prefilled data, where you can input some characters and remove the focus from this input field, by using the third input. The second input is readOnly, where the expected behavior is to show the input from start. As of now, in Android, it shows from end, when the input is blurred.

`Repo URL: https://github.com/hariomsinha7/bug-react-native-textinput`

### React Native Version

0.73.0

### Affected Platforms

Runtime - Android

### Areas

Fabric - The New Renderer, TurboModule - The New Native Module System, JSI - Javascript Interface, Codegen

### Output of `npx react-native info`

```text
System:
  OS: macOS 14.4.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 120.02 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.17.0
    path: ~/.nvm/versions/node/v18.17.0/bin/node
  Yarn:
    version: 1.22.19
    path: /opt/homebrew/bin/yarn
  npm:
    version: 9.6.7
    path: ~/.nvm/versions/node/v18.17.0/bin/npm
  Watchman:
    version: 2024.04.15.00
    path: /opt/homebrew/bin/watchman

Stacktrace or Logs

NA

Reproducer

https://github.com/hariomsinha7/bug-react-native-textinput

Screenshots and Videos

NA

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.73.7. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[mannoeu]

The same here. I've already tried several ways to make the cursor return to the beginning after losing focus, allowing the beginning of the input value to be visible and the end cut off and not the other way around, which is the default.

[alanleedev]

@hariomsinha7 could you tell us the React Native version that you were using before the upgrade to 73.0 when it was working? I think I see same issue with 0.72.7?

[alanleedev]

Found the issue issue in current code and will work on a fix for this.