Skip to content

[iOS] TextInput placeholder position changes after a long drag of cursor and text clear #28765

@davidleee

Description

@davidleee

Description

Following the steps in 'Steps To Reproduce', the placeholder text has moved forward a little bit, and the cursor is blinking in between the placeholder, like so:
Screen Recording 2020-04-27 at 6

React Native version:

System:
OS: macOS 10.15.3
CPU: (4) x64 Intel(R) Core(TM) i5-7287U CPU @ 3.30GHz
Memory: 53.38 MB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 10.16.3 - /usr/local/bin/node
Yarn: 1.15.2 - ~/.yarn/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.8.4 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK:
API Levels: 21, 23, 24, 25, 26, 27, 28
Build Tools: 23.0.1, 26.0.2, 27.0.3, 28.0.0, 28.0.2, 28.0.3
System Images: android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64
Android NDK: 13.1.3345770
IDEs:
Android Studio: 3.4 AI-183.6156.11.34.5522156
Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_172 - /usr/bin/javac
Python: 2.7.15 - /usr/local/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.11.0 => 16.11.0
react-native: 0.62.2 => 0.62.2
npmGlobalPackages:
react-native: Not Found

Steps To Reproduce

  1. Setup a single line TextInput with some placeholder text in it
  2. Set the clearButtonMode to 'while-editing'
  3. Type in some long content, they should be long enough to cause TextInput to scroll horizontally a long way
  4. Drag the cursor without stopping to the begin of the content
  5. Clear the content with the clear button

Expected Results

Placeholder should be in the right place

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

Like the screenshot above, I am using the project created by npx react-native init MyTestApp.

After that, just put a TextInput like this below the Header:

<TextInput
     style={{
         height: 30,
         backgroundColor: 'aqua',
         flex: 1,
     }}
     clearButtonMode={'while-editing'}
     placeholder={'This is some placeholder'}
/>

It should be reproducible with any long content, but I am not sure how long it should be. Here is the long content I used to take the screen shot:

UITextPosition UITextPosition UITextPosition UITextPosition UITextPosition UITextPosition UITextPosition UITextPosition UITextPosition UITextPosition UITextPosition UITextPosition UITextPosition UITextPosition UITextPosition UITextPosition UITextPosition UITextPosition UITextPosition UITextPosition UITextPosition

Debugging view hierarchy in Xcode I find that the UIFieldEditor is having a negative x value but I don't know why.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Component: TextInputRelated to the TextInput component.Needs: Triage 🔍Platform: iOSiOS applications.StaleThere has been a lack of activity on this issue and it may be closed soon.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions