[IOS] - empty TextInput with selection

[freeboub]

Description

On iOS only, when we create a TextInput with a selection value, the text is not displayed.

Steps to reproduce

Here is a minimal code to reproduce the issue:

      <TextInput style={styles.text}
        selection={{start: 0, end: 0}}>
        hello World!
      </TextInput>

React Native Version

0.77.0

Affected Platforms

Runtime - iOS

Areas

Fabric - The New Renderer

Output of npx react-native info

System:
  OS: macOS 15.0
  CPU: (11) arm64 Apple M3 Pro
  Memory: 99.22 MB / 18.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.18.1
    path: ~/.nvm/versions/node/v20.18.1/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.8.2
    path: ~/.nvm/versions/node/v20.18.1/bin/npm
  Watchman:
    version: 2024.12.02.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK:
    API Levels:
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 26.0.3
      - 30.0.3
      - 33.0.0
      - 33.0.1
      - 34.0.0
      - 35.0.0
    System Images:
      - android-34 | Google APIs ARM 64 v8a
      - android-35 | Google Play ARM 64 v8a
    Android NDK: 26.1.10909125
IDEs:
  Android Studio: 2024.2 AI-242.23726.103.2422.12816248
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.12
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.77.0
    wanted: 0.77.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

No Log

Reproducer

https://github.com/freeboub/bug-react-native-textInput-selection-ios

Screenshots and Videos

on ios:

on android:

[freeboub]

I am sorry I wrote a very short description as it is very easy to reproduce, if you need more informations or additional tests, let me know !

[freeboub]

I did some small investigations, the issue looks like coming from this line:

react-native/packages/react-native/Libraries/Components/TextInput/TextInput.js

Line 1324 in 1b066ba

: '';

If I replace the '' by undefined the issue is fixed.

Here is my understanding:

First I didn't find how children are handled on native side, but at mount the execution goes to this line initialize the state (with '' text)

react-native/packages/react-native/Libraries/Components/TextInput/TextInput.js

Line 1070 in 1b066ba

viewCommands.setTextAndSelection(

And the call is handled here:

react-native/packages/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm

Line 539 in 1b066ba

if (value && ![value isEqualToString:_backedTextInputView.attributedText.string]) {

to apply the value to native ios component.

As '' is not null, the text is reset to an empty value.
I think the children is applied before this workflow, so the previously applied children value is lost.

Please let me know if my conclusions make sense for you.
I can open a PR with this change if needed.

I cross checked android, I didn't see any issue. I didn't test without fabric.
I will check this change with my fully integrated app to ensure this patch is enough for my problematic use cases.

[freeboub]

I confirm this patch works and fix the issue in my fully integrated app. I will open a PR with this change !