Keyboard automatically closes when a textinput is focused inside the modal

[karanpratapsingh]

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

[karanpratapsingh]

@jeremybarbet It would be great if you could help me, Thanks

[jeremybarbet]

Hi!

Have you been able to figure it out? It's a known issue but I don't have time to work on it unfortunately.

[karanpratapsingh]

Yes, to prevent this issue you need to render the list header using good ol' if-else logic 🤣

[jeremybarbet]

Definitely not ideal. I'll do my best to work on this when I have downtime!

[gamingumar]

Have you tried blurOnSubmit={false} in your TextInput?

[jeremybarbet]

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

[maartenvandillen]

This fixed it for me: callstack/react-native-paper#736 (comment)

I needed to change the header prop from a function to an element.

[AdarshJais]

Is this solved in a proper way?

[nharis7]

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

[cerdonmez]

Thanks for the good explanation. It worked for me also.

[sanjaykochrekar]

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 worked for me
Thanks

[sanjaykochrekar]

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

its working