Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TextInput component with placeholderTextColor attribute appears to overlap cursor #27687

Closed
lao9 opened this issue Jan 6, 2020 · 3 comments
Closed
Labels
Bug Component: TextInput Related to the TextInput component. Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@lao9
Copy link

lao9 commented Jan 6, 2020

Noticed in our application that the placeholder text appeared above the cursor:

Screen Shot 2020-01-03 at 6 48 14 PM

Occurs on both iOS and Android platforms.

Simply removing the placeholderTextColor attribute appears to fix the overlap:

Image from iOS

React Native version:

System:
    OS: macOS 10.15.2
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 1.21 GB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 28, 29
      Build Tools: 29.0.2
      System Images: android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.3/11C29 - /usr/bin/xcodebuild
  npmPackages:
    react: link:../libraries/node_modules/react => 16.11.0
    react-native: ^0.61.5 => 0.61.5

Steps To Reproduce

  1. Create a TextInput
  2. Add a placeholderTextColor (in our case, the value was #CFCECE)

Describe what you expected to happen:

We expected the cursor to continue to appear over the placeholder text.

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

I tried to reproduce in this snack: https://snack.expo.io/B12ftrpkL

Unfortunately, not reproducible on iOS, however it seems to be an issue with or without the placeholderTextColor attribute on Android, so I'm not sure this simulator can be trusted for this specific issue. 😕

image

@lao9 lao9 added the Bug label Jan 6, 2020
@react-native-bot react-native-bot added the Component: TextInput Related to the TextInput component. label Jan 6, 2020
@ericlewis
Copy link
Contributor

Does this occur the same for both multiline and single line inputs?

@stale
Copy link

stale bot commented Apr 5, 2020

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Apr 5, 2020
@stale
Copy link

stale bot commented Apr 12, 2020

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

@stale stale bot closed this as completed Apr 12, 2020
@facebook facebook locked as resolved and limited conversation to collaborators Apr 13, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Bug Component: TextInput Related to the TextInput component. Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests

3 participants