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 triggers keyboard when dragging #19577

Closed
rumbogs opened this issue Jun 5, 2018 · 6 comments
Closed

TextInput triggers keyboard when dragging #19577

rumbogs opened this issue Jun 5, 2018 · 6 comments
Labels
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

@rumbogs
Copy link

rumbogs commented Jun 5, 2018

Environment

Environment:
OS: macOS High Sierra 10.13.4
Node: 8.9.3
Yarn: 1.7.0
npm: 5.8.0
Watchman: 4.9.0
Xcode: Xcode 9.4 Build version 9F1027a
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.4.0 => 16.4.0
react-native: 0.55.4 => 0.55.4

Description

Have a TextInput element inside a ScrollView element.

Steps to Reproduce

  1. Tap the TextInput but don't lift the finger.
  2. Drag the ScrollView a bit.
  3. Lift the finger, after the ScrollView has been dragged.

Expected Behavior

When finished dragging the TextInput should not still hold focus, and the keyboard should not show up.

Actual Behavior

When finished dragging, the keyboard will show up.

@react-native-bot react-native-bot added the Component: TextInput Related to the TextInput component. label Jun 5, 2018
@rumbogs
Copy link
Author

rumbogs commented Jun 6, 2018

@hramos: I've added clearer steps to reproduce. I think it's a pretty straightforward issue. Let me know if it needs more explanations.

@hieunc229
Copy link

I ran into a similar issue recently, TextInput will be focused when either being "pressed" or "long pressed". In this situation, TextInput layer is staying on top of ScrollView layer, and when you do a "long press", it will also trigger the action in TextInput.

One solution is to update TextInput editable props to "false" (using state) when drag started. (I haven't tried this, the rerendering could cause issue).

Another solution that fits with my situation was creating a custom component that basically using Text to display the content and replace with TextInput using "onPress" to edit content. Though I hope to find a nicer solution for this issue

@hramos
Copy link
Contributor

hramos commented Aug 2, 2018

The "No Repro Steps" is because of the lack of sample code. You can save contributors time by adding a Snack that is all set up to reproduce this.

@rumbogs
Copy link
Author

rumbogs commented Aug 10, 2018

Here is a Snack to reproduce the issue:
https://snack.expo.io/HyqrIWjH7

Just try scrolling while over the TextInput, the keyboard will open.

From what I understand this is a regression and it behaved as expected in 0.54.2, based on https://stackoverflow.com/questions/38885599/prevent-textinput-to-focus-while-scrolling-on-ios.

@stale
Copy link

stale bot commented Dec 21, 2018

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 "For Discussion" or "Good first issue" 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 Dec 21, 2018
@stale
Copy link

stale bot commented Dec 28, 2018

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 Dec 28, 2018
@facebook facebook locked as resolved and limited conversation to collaborators Dec 29, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
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

4 participants