CODEWITHSUNDEEP
reactjsreact-native
r00t -
r00t -

Reputation: 275

TextInput weird behaviour in React-Native

I have the following TextInput, 

<TextInput
        style={[
          styles.inputField,
          isEmailError && { borderColor: color.delete },
        ]}
        placeholder={'E-mail'}
        placeholderTextColor={color[colorScheme].textMuted}
        autoCapitalize={'none'}
        autoCorrect={false}
        value={userCredentials.email}
        onChangeText={onChangeEmail}
        onSubmitEditing={passwordInput.current && passwordInput.current.focus}
        blurOnSubmit={false}
        returnKeyType={'next'}
        keyboardType="email-address"
/>

When I click anywhere else outside the keyboard(let's say a button), the expected behaviour is that the button will get clicked, however, in here, first click always closes the keyboard then I have to press again for whatever element i was trying to reach.

Upvotes: 3

Views: 749

Answers (2)

Vagtse
Vagtse

Reputation: 121

Maybe try this:

import DismissKeyboard from 'dismissKeyboard';
<TouchableWithoutFeedback onPress={()=>{DismissKeyboard()}}>
    <View style={Styles.container}>
       <TextInput />
    </View>
 </TouchableWithoutFeedback>

Upvotes: 0

Kishan Bharda
Kishan Bharda

Reputation: 5690

This is because of scroll view. Add props keyboardShouldPersistTaps in your scrollview as below to solve error : 

<ScrollView
    keyboardShouldPersistTaps="handled"
    keyboardDismissMode="interactive"
>

...
...

</ScrollView>

You can find more detail here

Upvotes: 10

Related Questions