Text inside TextInput that have background make cursor disappear

jcubic commented 9 months ago

Description

If you have TextInput with children and one of the Text elements has a background the cursor on that element disappears (only the selection marker is visible). Found this while working with react-native-syntax-highlighting that was adding background but figured out how to remove the background that was on a wrapper.

Steps to reproduce

git clone https://github.com/jcubic/react-native-text-input-cursor.git
cd react-native-text-input-cursor
npm install
npm start

React Native Version

0.72.6

Affected Platforms

Runtime - Android

Output of `npx react-native info`

System:
  OS: Linux 6.6 Fedora Linux 39 (Xfce)
  CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
  Memory: 5.33 GB / 15.28 GB
  Shell:
    version: 5.2.21
    path: /bin/bash
Binaries:
  Node:
    version: 20.10.0
    path: ~/.nvm/versions/node/v20.10.0/bin/node
  Yarn: Not Found
  npm:
    version: 10.2.3
    path: ~/.nvm/versions/node/v20.10.0/bin/npm
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
Languages:
  Java:
    version: 17.0.9
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/local/rvm/rubies/ruby-2.6.10/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.6
    wanted: 0.72.6
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

I'm not sure why npx react-native info doesn't work on my system (Fedora) I do have an SDK and Android Studio.

Stacktrace or Logs

none

Reproducer

https://github.com/jcubic/react-native-text-input-cursor

Screenshots and Videos

github-actions[bot] commented 9 months ago

:warning:	Newer Version of React Native is Available!
:information_source:	You are on a supported minor version, but it looks like there's a newer patch available - 0.72.8. 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.

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available - 0.72.8. 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.

jcubic commented 9 months ago

I use Expo I can upgrade the version of RN.

fabOnReact commented 8 months ago

Do you still experience this issue? If yes, I will publish the fix in the react-native-improved package https://github.com/fabriziobertoglio1987/react-native-improved. Thanks a lot

jcubic commented 8 months ago

@fabriziobertoglio1987 the issue was not fixed if this is what you're asking. I fixed my code by not using background but this doesn't mean that the bug is not there.

facebook / react-native