Repository navigation
Keyboard dismiss not working after autocomplete #28025
Description
Description:
I am developing a React Native app using Expo and as I am building a login form, it seems that after autocompleting the form (on iOS), my calls to Keyboard.dismiss() do not work, and the keyboard stays where it is, which messes with my UI badly.
React Native version:
react: 16.9.0 => 16.9.0
react-native: https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz => 0.61.4
Steps To Reproduce
Build a login form with two TextInputs:
One with keyboardType='email-address' and one with secureTextEntry. This will let iOS know that credentials can go here.
Add a button that simply calls Keyboard.dismiss()
Now in the app, focus on a TextInput, and use autocomplete to fill the fields (with data from whatever website/app)
Expected Results
Now, when you try to use your button to dismiss the keyboard, it wont go away. You would have to tap on another text field to get the keyboard to go away
Snack, code example, screenshot, or link to a repository:
<TextInput
placeholder='Email address'
placeholderTextColor='rgba(44,44,44,0.4)'
returnKeyType='next'
onSubmitEditing={() => this.passwordInput.focus()}
style={[
styles.input,
this.state.usernameError && styles.inputError
]}
keyboardType='email-address'
autoCapitalize='none'
autoCorrect={false}
onBlur={() => this.setState({ usernameError: '' })}
value={this.state.username}
onChangeText={text => this.setState({ username: text.trim() })}
/>
<TextInput
placeholder='Password'
secureTextEntry
returnKeyType='go'
autoCapitalize='none'
autoCorrect={false}
onBlur={() => {
Keyboard.dismiss();
this.setState({ passwordError: '' });
}}
style={[
styles.input,
this.state.passwordError && styles.inputError
]}
ref={input => (this.passwordInput = input)}
value={this.state.password}
onChangeText={text => this.setState({ password: text.trim() })}
/>
<Button
title="Dismiss Keyboard"
onPress={Keyboard.dismiss}
/>
Activity
someok commentedon Apr 6, 2020
yes, I have save problem
jaymdq commentedon Apr 20, 2020
Having the same problem over here
react 16.9
react-native 0.61.5
musartedev commentedon May 4, 2020
I have the same problem. I'm not using expo. It happens after Face Id autocompletion.
react 16.9
react-native 0.61.5
rikur commentedon May 21, 2020
EDIT: I fixed my issue by
useRefhook instead of arefpropertly like original poster.dann1609 commentedon Jul 9, 2020
Same issue on same version. There is any solution or any version to migrate?
stale commentedon Oct 12, 2020
Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.
pdugan20 commentedon Oct 12, 2020
I'm no longer seeing this with the latest version of RN. Assuming it was fixed at some point?
verybluebot commentedon Dec 23, 2020
Still getting this
bpofficial commentedon Jul 16, 2021
also still getting this
github-actions commentedon Apr 6, 2023
This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.
github-actions commentedon Apr 13, 2023
This issue was closed because it has been stalled for 7 days with no activity.