React-native: Property keyboardShouldPersistTaps={true} not working in <Modal /> view

[ogtfaber]

Issue Description

Given a in a , and the TextInput being active (keyboard is shown), I can't get any Touchable... element to respond to onPress before dismissing the keyboard.

Steps to Reproduce / Code Snippets

See the example code below. I would expect the TouchableOpacity (a yellow square) to popup an Alert while the TextInput is active and the keyboard is shown. Instead, I have to tap to dismiss the keyboard first.

The property keyboardShouldPersistTaps={true} does the trick in another view, but not inside of a

<Modal
  animationType={"slide"}
  transparent={false}
  visible={this.props.visible} >
  <ScrollView
    keyboardDismissMode="on-drag"
    keyboardShouldPersistTaps={true} >
    <TouchableOpacity onPress={() => alert(1)} style={{ backgroundColor: 'yellow', width: 200, height: 200, }} />
    <TextInput style={{
      height: 40,
      backgroundColor: 'red',
    }} />
  </ScrollView>
</Modal>

Additional Information

• React Native version: 0.34
• Platform(s): iOS
• Operating System: macOS

[iljaiwjew]

+1, 0.35.0-rc.0, iOS + macOS

[manggit]

Same problem here, using a list view
0.36 iOS

[hlynn93]

+1 0.36 on iOS

[Arkanine]

Have the same issue on iOS.
RN 0.32.1

[roysG]

Same issue : react native - 0.37

[dcolin]

Same problem RN 0.39, any idea?

[chapati23]

confirmed, same issue. keyboardShouldPersisTaps has no effect on modals.
has anyone found a workaround for this by any chance?

[razvan-tudosa]

I lost 2 hours because of this bug.

[kenma9123]

I can confirm this is not working :/ using RN 0.41.1

[ptgamr]

In my case, I have a ScrollView as the parent of Modal. Setting keyboardShouldPersistTaps on that ScrollView fix the issue inside Modal.

[dxiao]

putting the scrollview on the outside of my Modal did not solve issue for me.

[despreston]

+1

[andrzli]

Has anyone found a solution for this?

[iiitmahesh]

:+1: Same issues

[despreston]

what fixed it for me is to make sure that all nested scrollviews have this property set.

e.g:

<ScrollView><ScrollView keyboardShouldPersistTaps></ScrollView></ScrollView>

This won't work because the parent ScrollView does not have this property set.

[gre]

the fix for me was that I had to set keyboardShouldPersistTaps on ALL scrollview ancestors of my Modal...
otherwise, if any ScrollView in your parent tree do the default keyboardShouldPersistTaps="none", the keyboard will be dismissed (in my case I want to prevent a dismiss).

anyway, whatever what you want to solve (dismiss/not dismiss/respond to onPress) – you will have to be aware that the <Modal> cares about its (scrollview) parent stack, I assumed it would be like if rendered on top level, but no. rendering your modal component from root OR within a complex stack of scrollview, have different behavior. I think that's a valid concern for Modal to fix that, at least if not, it should be documented.

[marktrobinson]

@despreston & @gre that solved it for me.

Once my both my parent and child FlatList had the keyboardShouldPersistTaps prop set it worked a treat

[kakakalot]

I just use TouchableHighlight instead of TouchableOpacity and the onPress works

          <ScrollView
            keyboardShouldPersistTaps='always'
            style={styles.listItem}>
            {items.map((item, index) => this._renderTouchableItem(item, index))}
          </ScrollView>

  _renderTouchableItem = (item, index) => {
    return (
      <TouchableHighlight
        key={index}
        underlayColor='transparent'
        onPress={() => this.props.onTouchableItemSelected(this, index)}
      >
        <Text value={item.label} style={{ padding: 16, paddingLeft: 24 }} />
      </TouchableHighlight>
    )
  }

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[profiVideos]

I know this is closed. However, I just struggled with this for a few hours as well. Thanks to the comments read here; I found a solution that worked in my situation. I didn't even know that Flatlist would accept the keyboardShouldPersistTaps='always' parameter. I ended up having no extra ScrollViews, simply adding that parameter to Flatlist worked out great.

  <FlatList
    keyboardShouldPersistTaps='always'
    data={this.props.itemList}
    extraData={this.props}
    renderItem={this.renderCardItem}
    ItemSeparatorComponent={this.itemSeparator}
  />

Cheers
Using RN .51 BTW

[ghoshabhi]

The only solution I could find is having keyboardShouldPersistTaps on all ScrollViews in the component stack for the screen.

Credits: @despreston, @gre