TextInput: placeholder bug with increased space between letters

[skinnynpale]

Description

This bug appears completely randomly. tried using bare TextInput - same thing. Same thing on emulators and build versions.

Steps to reproduce

This bug appears completely randomly

React Native Version

0.73.2

Affected Platforms

Runtime - iOS, Build - MacOS

Areas

Fabric - The New Renderer, TurboModule - The New Native Module System, Other (please specify)

Output of npx react-native info

System:
  OS: macOS 14.2.1
  CPU: (12) arm64 Apple M3 Pro
  Memory: 100.45 MB / 18.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.19.0
    path: ~/.nvm/versions/node/v18.19.0/bin/node
  Yarn:
    version: 1.22.21
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.2.3
    path: ~/.nvm/versions/node/v18.19.0/bin/npm
  Watchman:
    version: 2023.12.04.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.14.3
    path: /Users/skinnynpale/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - visionOS 1.0
      - watchOS 10.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2023.1 AI-231.9392.1.2311.11076708
  Xcode:
    version: 15.2/15C500b
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /usr/bin/javac
  Ruby:
    version: 3.0.6
    path: /Users/skinnynpale/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.2
    wanted: 0.73.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

This bug appears completely randomly

Reproducer

This bug appears completely randomly

Screenshots and Videos

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[cortinico]

@skinnynpale Is this happening only on the New Architecture?

[skinnynpale]

@skinnynpale Is this happening only on the New Architecture?

It seems that yes, our project was previously on the old architecture, there were no such problems, after moving to the new architecture, problems appeared

[cortinico]

@skinnynpale Is this happening only on the New Architecture?

It seems that yes, our project was previously on the old architecture, there were no such problems, after moving to the new architecture, problems appeared

If you disable the New Architecture does the problem disappear?

[SarviroRoman]

@skinnynpaleЭто происходит только в Новой Архитектуре?

Вроде да, наш проект раньше был на старой архитектуре, таких проблем не было, после перехода на новую архитектуру проблемы появились

Если отключить новую архитектуру, проблема исчезнет?

Thanks for your interest, let us check it out. Perhaps the problem is not in the new architecture, but in the new version of RN. We will gather more information and get back to you.

[cortinico]

Perhaps the problem is not in the new architecture, but in the new version of RN. We will gather more information and get back to you.

Yup thank you

[mdvacca]

@skinnynpale

• could you add a small code example of the text input props and styles?
• is the first screensht from android? or can you confirm you can repro on both platforms?

[skinnynpale]

@skinnynpale

• could you add a small code example of the text input props and styles?
• is the first screensht from android? or can you confirm you can repro on both platforms?

1. this manifests itself even if we simply use bare <TextInput />
2. no, iOS, was not noticed on android

P.S — this bug appears often along with this https://github.com/facebook/react-native/issues/42640#issuecomment-1909951711

[cipolleschi]

@skinnynpale Thanks for the issue. Can I ask if you can share the styles you are applying to the TextInputs?

Because I'm trying to repro, but I can't.

The way I'm doing it:

npx react-native@nightly init TestTextInput --skip-install --version nightly
cd TestTextInput
yarn install
cd ios
bundle install
RCT_NEW_ARCH_ENBLED=1 bundle exec pod install
open TestTextInput.xcworkspace
cd ..
yarn start

From Xcode, I build and run.

Then, I opened Visual Studio code and I modified the App.tsx with this gist and I tried to refresh and relaunch several times, but I could not reproduce the issue... 🤔 I tried both:

• New Arch (Bridge)
• New Arch (Bridgeless)

Am I doing something wrong? Perhaps I forgot to wrap the TextInputs in some other component? Could it be that there is something in your styles that makes RN unhappy?

[skinnynpale]

@skinnynpale Thanks for the issue. Can I ask if you can share the styles you are applying to the TextInputs?

Because I'm trying to repro, but I can't.

The way I'm doing it:

npx react-native@nightly init TestTextInput --skip-install --version nightly
cd TestTextInput
yarn install
cd ios
bundle install
RCT_NEW_ARCH_ENBLED=1 bundle exec pod install
open TestTextInput.xcworkspace
cd ..
yarn start

From Xcode, I build and run.

Then, I opened Visual Studio code and I modified the App.tsx with this gist and I tried to refresh and relaunch several times, but I could not reproduce the issue... 🤔 I tried both:

• New Arch (Bridge)
• New Arch (Bridgeless)

Am I doing something wrong? Perhaps I forgot to wrap the TextInputs in some other component? Could it be that there is something in your styles that makes RN unhappy?

hi, thank you! this appeared even when leaving a regular component without styles without anything. can try on a new architecture and wrap it in createStackNavigator

[skinnynpale]

@cipolleschi there is a crazy hypothesis, could this be related to the word "Enter"?

[cortinico]

@cipolleschi there is a crazy hypothesis, could this be related to the word "Enter"?

I'd say unlikely, unless you can provide a repro where clearly setting two different strings results in different behavior

[cipolleschi]

Yes, as said, we need a reliable repro to investigate the issue properly.

Out of caution, I also tried using the Enter word as placeholder, but I can't repro it.

[cortinico]

@skinnynpale closing as cannot reproduce. Please provide us a valid reproducer and we'll be more than happy to look back into it 👍