React-native: After upgrading from 0.58 to 0.59 keyboard dismisses automatically when focused on TextInput inside a Flatlist

[maulikgushani]

🐛 Bug Report

After upgrading from 0.58 to 0.59 keyboard dismisses automatically when focused on TextInput inside a Flatlist. Issues got in both ios and android.

To Reproduce

• Create flatlist with some data.
• Create TextInput inside Flatlist
• Run app and Observe behaviour

Expected Behavior

• Keyboard not dismiss automatically and focus was not lost from TextInput.

Code Example

<FlatList
  data={this.state.productData}
  keyExtractor = {(item, index) => index.toString()}
  onEndReachedThreshold = {0.5}
  key={'product-list'}
  onEndReached = {() => this.state.callNextRequest==true ? this.handleEnd() : undefined}
  renderItem = {({item, index}) => (
    <View>
      <TextInput
        placeholder="Qty"
        value={this.state.qty[index]}
        onChangeText={(qty) => this.qtyChange(qty,index)}
        placeholderTextColor={COLOR_GRAY}
        keyboardType={'numeric'}
        style={style.qtyInput}
      />
    </View>
  )}
/>

Environment

React Native Environment Info:
System:
OS: Linux 4.15 Ubuntu 18.04.1 LTS (Bionic Beaver)
CPU: (4) x64 Intel(R) Core(TM) i3-4130 CPU @ 3.40GHz
Memory: 352.13 MB / 7.69 GB
Shell: 4.4.19 - /bin/bash
Binaries:
Node: 8.14.0 - /usr/bin/node
npm: 6.9.0 - /usr/bin/npm
SDKs:
Android SDK:
API Levels: 23, 25, 26, 27, 28
Build Tools: 23.0.1, 25.0.2, 26.0.1, 26.0.3, 27.0.3, 28.0.0, 28.0.0, 28.0.3
System Images: android-P | Google APIs Intel x86 Atom
npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.0 => 0.59.0
npmGlobalPackages:
react-native-cli: 2.0.1

[hypest]

Can this be somehow related to https://github.com/Rachelmorrell/react-native/pull/170?

I think that setting FlatList.removeClippedSubviews to false might be a workaround for now.

[LuongTruong]

solution of @hypest worked. Thank you!

[maulikgushani]

Can this be somehow related to Rachelmorrell#170?

I think that setting FlatList.removeClippedSubviews to false might be a workaround for now.

thank you @hypest it's working in android but got the problem in ios.
when focus on last item of TextInput inside a flatlist the white screen is display.
have you any solution please suggest me ?

[hypest]

thank you @hypest it's working in android but got the problem in ios.
when focus on last item of TextInput inside a flatlist the white screen is display.
have you any solution please suggest me ?

Hey @maulikgushani, sorry I have no new suggestion :(

Sounds like a different issue though, since you mention "the white screen is display" but current ticket is about the keyboard dismissing.

[maulikgushani]

thank you @hypest it's working in android but got the problem in ios.
when focus on last item of TextInput inside a flatlist the white screen is display.
have you any solution please suggest me ?

Hey @maulikgushani, sorry I have no new suggestion :(

Sounds like a different issue though, since you mention "the white screen is display" but current ticket is about the keyboard dismissing.

@hypest yes you are right this is the different issue but after adding FlatList.removeClippedSubviews to false i got the problem so i ask you.

[alloy]

Regarding the OP, have you looked into the keyboardDismissMode and keyboardShouldPersistTaps props of ScrollView?

[guptaamol]

i am witnessing the same issue keyboardDismissMode='none' does not help nor does 'keyboardShouldPersistTaps='always''

[guptaamol]

this has been bugging me over the last 6 hours.

[maulikgushani]

anyone got the solution ?
please suggest me.

[atrolcd]

I confirm that I also have the same issue.

[imminentmulberry]

I encountered this as well. Adding removeClippedSubviews={false} to my FlatList fixed it. Thanks for the workaround!

[swashcap]

Adding removeClippedSubviews={false} to my FlatList’s custom ListHeaderComponent doesn't solve the keyboard issue.

[haitranhuy]

still stuck

[venkatesh-u]

removeClippedSubviews={false} leads to another issue, focussing of any item's text input and trying to scroll down then it scrolls down and immediately scrolls up to the focussed indexed item automatically.

[tandat2209]

Can this be somehow related to Rachelmorrell#170?

I think that setting FlatList.removeClippedSubviews to false might be a workaround for now.

Works for me. Thank you 👍

[BigGoblin]

it is work for me

[VitorBrangioni]

Same issue.

[mayurbaldha]

Same issue for
react-native-cli: 2.0.1
react-native: 0.60.5

[stale[bot]]

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[bot]]

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.