Keyboard automatically closes when a textinput is focused inside the modal
See original GitHub issueIssue:
Keyboard automatically closes after typing a single character on iOS (haven’t tested android) when a text input inside the modal is focused
Modal:
<Modalize
ref={this.modal}
adjustToContentHeight
keyboardAvoidingBehavior={'padding'}
onClosed={this.onClosed}
modalStyle={{ marginTop: 32 }}
flatListProps={{
stickyHeaderIndices: [0],
ListHeaderComponent: () => this._listHeaderComponent(),
data: this.data,
renderItem: this.renderItem,
keyExtractor: item => item.email,
showsVerticalScrollIndicator: false,
}}
/>
);
ListHeader component:
_listHeaderComponent = () => (
<View style={{flex: 1, justifyContent: 'center', height: 60, width: '100%', backgroundColor: 'salmon' }}>
<TextInput
style={{ fontSize: 20, backgroundColor: 'yellow' }}
value={this.state.searchQuery}
onChangeText={searchQuery => this.setState({ searchQuery })}
/>
</View>
);
EXPO SNACK: https://snack.expo.io/HkZULlxSB
Issue Analytics
- State:
- Created 4 years ago
- Comments:12 (3 by maintainers)
Top Results From Across the Web
Modal closes in real android devices when Keyboard open in ...
Modal closes automatically without any error when I click on the last button of the list or the button aligned with the bottom...
Read more >Close Iphone Ipad keyboard automatically when closing modal
When I close the modal with javascript I do a .focus() and then a .blur() to that input and with that it is...
Read more >Accessibility - React
Keyboard focus refers to the current element in the DOM that is selected to accept input from the keyboard. We see it everywhere...
Read more >Modal - Bootstrap
Clicking on the modal “backdrop” will automatically close the modal. Bootstrap only supports one modal window at a time. Nested modals aren't supported...
Read more >Modal | Components - BootstrapVue
<b-modal> , by default, has an OK and Cancel buttons in the footer. ... automatically return focus to the trigger element once the...
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 Free
Top 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
If you use FlatList for rendering view without inputting data, you need to set removeClippedSubviews={true} or use the default option for optimizing rendering view. For your case (render with input) you should set removeClippedSubviews={false} to prevent the keyboard hide/show.
<FlatList .... removeClippedSubviews={false} ... />It’s because the ListHeaderComponent from the FlatList is being re-render each time you change the state. I’m not sure to see a quick solution to fix in this context of usage.
Even though if you have the possibility to use
HeaderComponentinstead I would recommend you do that: https://snack.expo.io/@jeremdsgn/modalize-issueI’m closing this issue