After upgrading from 0.58 to 0.59 keyboard dismisses automatically when focused on TextInput inside a Flatlist
See original GitHub issue🐛 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® Core™ 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
Issue Analytics
- State:
- Created 5 years ago
- Reactions:10
- Comments:20 (2 by maintainers)
Top Results From Across the Web
TextInput inside a FlatList loses focus when off-screen
Keep the Flatlist inside a ScrollView so that on clicking the bottom text input the view is moved up and it allows the...
Read more >nested textinput on scrollview react native - You.com
Keyboard dismisses while typing TextInput in nested functional component React ... in it's place; since old input is unmounted, you lose keyboard focus....
Read more >react-native-keyboard-aware-scroll-view - npm
A ScrollView component that handles keyboard appearance and automatically scrolls to focused TextInput . Scroll demo ...
Read more >Today's React Native Tip: Keyboard issues in ScrollView
While using TextInput inside a scrollable page (ScrollView) there are a few issues you will run into with the keyboard being in focus....
Read more >How to make your React Native app respond gracefully when ...
You can take the base code, which has the keyboard covering the inputs, and update that so that the inputs are no longer...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Can this be somehow related to https://github.com/Rachelmorrell/react-native/pull/170?
I think that setting
FlatList.removeClippedSubviews
tofalse
might be a workaround for now.I confirm that I also have the same issue.