Keyboard automatically closes when a textinput is focused inside the modal

See original GitHub issue

Issue:

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:closed
  • Created 4 years ago
  • Comments:12 (3 by maintainers)

github_iconTop GitHub Comments

20reactions
nharis7commented, Sep 1, 2020

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} ... />

7reactions
jeremybarbetcommented, Jan 28, 2020

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 HeaderComponent instead I would recommend you do that: https://snack.expo.io/@jeremdsgn/modalize-issue

I’m closing this issue

Read more comments on GitHub >

github_iconTop 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 >

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