question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using TextInputs in carousel slides: need a way to handle touch events while keyboard is open

See original GitHub issue

Is this a bug report, a feature request, or a question?

Question

I am using e.g. this great carousel library for a signup form. I have multiple TextInput within these forms, that gets rendered to the carousel sliders. When entering text and clicking a submit button it needs at least two clicks, as first, the text view gets unfocused. So basically, we need a feature that allows us to handle TouchEvents while the keyboard is open. I know that we have for ScrollView this KeyboardShouldPersistTaps Prop to alternate this behaviour. I think something similar in this library would be great! 😊

See my expo snack below for an example.

Have you followed the required steps before opening a bug report?

(Check the step you’ve followed - put an x character between the square brackets ([]).)

Have you made sure that it wasn’t a React Native bug?

Yes

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

Both

Is the bug reproductible in a production environment (not a debug one)?

Yes it is

Environment

React: 16.8.3
React native: 0.59.8
react-native-snap-carousel: 3.8.0

Target Platform: Android (6.0) iOS (12.4)

Expected Behavior

You can click the button while the keyboard is open. The TextInput gets unfocused AND the button gets clicked (/the other touch events are getting handled).

Actual Behavior

It needs at least two clicks to trigger the button

Reproducible Demo

https://snack.expo.io/@hannojg/rn-carousel-input-issue

Steps to Reproduce

  1. Enter some text into the text input
  2. Click the button WHILE the keyboard is open
  3. Issue is exposing, as first the text input gets unfocused

Thank you for your time in advance, and your great library!

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:1
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

9reactions
bd-arccommented, Oct 3, 2019

Hi @hannojg,

Have you tried using prop keyboardShouldPersistTaps on the carousel itself?

It should work the same as with a regular ScrollView. See this if you want more info.

3reactions
Bicksoncommented, May 8, 2020

it worked for me just adding keyboardShouldPersistTaps='handled'

<Carousel
keyboardShouldPersistTaps='handled'
...
/>
Read more comments on GitHub >

github_iconTop Results From Across the Web

Using TextInputs in carousel slides: need a way to handle ...
Enter some text into the text input · Click the button WHILE the keyboard is open · Issue is exposing, as first the...
Read more >
How to auto-slide the window out from behind keyboard when ...
First define a function that will handle the onFocus event for each TextInput (or any other component you would like to scroll to):...
Read more >
Mobile friendly carousel with touch and pointer events
Note: The touchdown and touchup in this tutorial should be replaced by touchstart and touchend!
Read more >
Handle input method visibility | Android Developers
When input focus moves in or out of an editable text field, Android shows or hides the input method—such as the on-screen keyboard—as ......
Read more >
When CSS Isn't Enough: JavaScript Requirements For ...
Spoiler alert: tooltips, modals, tabs, carousels, and dropdown menus are some of the user interface components that require more than CSS.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found