react-native-modal: Text input submit button not working on first click

Is your content wrapped in a <ScrollView />? If so, try keyboardShouldPersistTaps={'handled'} in <ScrollView> props.

I had this issue and where trying to add Scroll View with keyboardShouldPersistTaps="always" with no result. Later I’ve found that there was a ScrollView at the page where the modal located which wrapped a whole page. So all what I did: I added keyboardShouldPersistTaps="handled" to this ScrollView and it helped me.

So the main idea is to walk up through the component tree and find for ScrollView and add keyboardShouldPersistTaps="handled" to it if exists. Otherwise just add it at place where you need it.

keyboardShouldPersistTaps={'handled'} works for me, but in my case, I need to put these props into both the ScrollView and KeyboardAwareScrollView.

My code more or less looks like this:

<ScrollView 
     keyboardShouldPersistTaps={'handled'}
>
   ...
      <KeyboardAwareScrollView
           keyboardShouldPersistTaps={'handled'}
      >
         ...
         <Modal>...</Modal>
         ...
      <KeyboardAwareScrollView>
   ...
<ScrollView>

@akhilsanker can you try change your keyboardShouldPersistTaps={'handled'} to keyboardShouldPersistTaps={'always'} and let me know if this works?

@mo-patel thankyou very much for " keyboardShouldPersistTaps={‘handled’}. It worked for me. thanks

I use TextInput and TouchableOpacity in KeyboardAvaidingView component. I can not click TouchableOpacity when Keyboard is opened. When I press the TouchableOpacity, just Keyboard disappear. I want TouchableOpacity to work while Keyboard is active. Does anyone have an idea?

I have fixed that by using in parent component=> in scrollView and if flatlist.

keyboardDismissMode=“interactive” keyboardShouldPersistTaps={ Platform.OS === ‘ios’ ? ‘handled’ : ‘always’ }

              flow of parent and child components also matter.

I am also encountering the same issue. None of those options that could potentially fix the problem have worked.

I had this issue and where trying to add Scroll View with keyboardShouldPersistTaps="always" with no result. Later I’ve found that there was a ScrollView at the page where the modal located which wrapped a whole page. So all what I did: I added keyboardShouldPersistTaps="handled" to this ScrollView and it helped me.

So the main idea is to walk up through the component tree and find for ScrollView and add keyboardShouldPersistTaps="handled" to it if exists. Otherwise just add it at place where you need it.

Thanks. it’s works for me.

I had this issue and where trying to add Scroll View with keyboardShouldPersistTaps="always" with no result. Later I’ve found that there was a ScrollView at the page where the modal located which wrapped a whole page. So all what I did: I added keyboardShouldPersistTaps="handled" to this ScrollView and it helped me.

So the main idea is to walk up through the component tree and find for ScrollView and add keyboardShouldPersistTaps="handled" to it if exists. Otherwise just add it at place where you need it.

This is the most underrated reply in the world. For everyone who suffered with figuring out why you cannot press a button when the keyboard is up. READ THIS COMMENT xP

Just find the first ScrollView or Flatlist that’s above your TextInput. Most of the time you’re component will be an item in a Flatlist or ScrollView. Just add keyboardShouldPersistTaps=“handled” to it.

IF YOU HAVE MULTIPLE SCROLLVIEWS, Like one flatlist in another, add it on the flatlist all the way up. (the parent/ first flatlist or scrollview)

I googled for hours before I read this comment and realised that my TextInput is in a component that’s being rendered in a Flatlist! Sometimes we’re so focused on the small picture, we forget to take a step back and see the big picture.

I made a question here too https://stackoverflow.com/questions/63103717/prevent-keyboard-dismiss-react-native-inside-modal

any solution？

I had this issue and where trying to add Scroll View with keyboardShouldPersistTaps="always" with no result. Later I’ve found that there was a ScrollView at the page where the modal located which wrapped a whole page. So all what I did: I added keyboardShouldPersistTaps="handled" to this ScrollView and it helped me.

So the main idea is to walk up through the component tree and find for ScrollView and add keyboardShouldPersistTaps="handled" to it if exists. Otherwise just add it at place where you need it.

Thanks. this works

Is your content wrapped in a <ScrollView />? If so, try keyboardShouldPersistTaps={'handled'} in <ScrollView> props.

What if it is not wrapped in a scrollview?

I got it working with native Modal component

Towards the root of my app, I have a <Swiper /> element which is basically a ScrollView. Adding keyboardShouldPersistTaps=“always” keyboardDismissMode=“on-drag” to the Swiper as props solved my issue

Hi @mo-patel, I have tried that too. But didn’t succeed.

Hi @mo-patel

<ScrollView 
refreshControl={
	<RefreshControl  tintColor={language.primary} refreshing={this.state.pullrefresh} onRefresh={() => this.onRefresh()} />
}
showsVerticalScrollIndicator={false}
contentContainerStyle={style.scrollWrapper}>
	<KeyboardAwareScrollView 
		contentContainerStyle={{flexGrow: 1}} 
		alwaysBounceVertical="false"
		showsVerticalScrollIndicator={false}
		keyboardShouldPersistTaps="handled">
		<Card style={{elevation: 2, marginTop: 2}} >
			<CardItem>
				<Body>
					...
				</Body>
			</CardItem>
		</Card>
		{/* -------------- modal to edit your response  ---------------------- */}
		<Modal isVisible={this.state.editRespModal}
			animationInTiming={1000}
			animationOutTiming={1000}
			backdropTransitionInTiming={800}
			backdropTransitionOutTiming={800}
			style={{zIndex: 99}}
			avoidKeyboard={true}
			autoFocus={true}									
		>
			<SafeAreaView style={{flex: 1}} >
			<KeyboardAwareScrollView contentContainerStyle={{  backgroundColor: '#fff' }}  keyboardShouldPersistTaps="handled" behavior={'position'}>
	           		<View style={{flex: 1}}>
	           			<View style={{backgroundColor: language.headerColor, justifyContent: 'center', height: 50, alignItems: 'center' }}>
	           				<Title style={{color: '#fff'}}>{language.editModalTitle}</Title>
	           			</View>
						<View style={{ flex: 1, marginTop: 20, padding: 10,}}>
								<View style={{flex: 1, justifyContent: 'center'  }}>
									<Text style={{fontSize: 16,fontWeight: '500', marginTop: 10}}>{language.yourResponseLabel}</Text>
									<TextInput style={style.textInputStyle}
										multiline={true}
										autoFocus={true}
										maxLength={255}
										textAlignVertical={'top'}
										underlineColorAndroid="transparent"
										selectionColor={language.headerColor}
										value={this.state.responseInput}
										onChangeText={(text) => this.responseAdded(text)}/>
								</View>
								<View style={{flex: 1, flexDirection: 'row', alignItems: 'flex-start' }}  >
									<Button
										title={language.closeLabel}
										buttonStyle={{backgroundColor: language.danger}}
										titleStyle={{fontWeight: '400'}}
										onPress={() => this.closeEditModal()}
										containerStyle={{marginHorizontal: 5, flex: 1}}
									/>
									<Button
										title={language.submitResponseBtn}
										disabled={this.state.buttonDisabled}
										buttonStyle={{backgroundColor: language.headerColor}}
										titleStyle={{fontWeight: '400'}}
										onPress={() => this.responseSubmit(this.state.detailsData.id)}
										loading={this.state.buttonLoading}
										containerStyle={{marginHorizontal: 5, flex: 2}}
									/>
								</View>
						</View>
					</View>
				</KeyboardAwareScrollView>
			</SafeAreaView>
		</Modal>
	</KeyboardAwareScrollView>