0

I have a functional component in which I am trying to clear a TextInput on submit. Sometimes the onChangeText callback is called after onSubmitEditing, so the input is not clear after submitting. Most often this happens due to autocorrect, but sometimes happens with random strings that were not autocorrected. How do I make sure the input is cleared consistently?

Code: https://snack.expo.io/hy4dKvvnr

export default function App() {
  const [inputValue, setInputValue] = useState('');
  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        value={inputValue}
        onChangeText={(value) => {
          console.log('CHANGE TEXT', value);
          setInputValue(value);
        }}
        blurOnSubmit
        onSubmitEditing={() => {
          console.log('SUBMIT TEXT');
          setInputValue('');
        }}
      />
    </View>
  );
}

Console logs:

iPhone 8: CHANGE TEXT Kdjgw
iPhone 8: SUBMIT TEXT
iPhone 8: CHANGE TEXT Kdjgw
Taylour
  • 43
  • 7
  • 1
    This seems like it is specific to autocorrect. I can see that the phone itself replaces the input field with the autocorrected value after I submit. One way would be to turn off autocorrect. I found something [here](https://stackoverflow.com/questions/53212534/cannot-turn-autocorrect-to-false-in-react-native-textinput). – Anish Oct 10 '20 at 16:42
  • 1
    Another way to avoid this is add a timeout before clearing the value in `onSubmitEditing`. But this causes the autocorrected value to be submitted. Something like: `onSubmitEditing={() => { setTimeout(() => { console.log('SUBMIT TEXT'); setInputValue(''); }, 25); }}` – Anish Oct 10 '20 at 16:44
  • @Anish Thanks! For anyone interested, I found the current issue for this problem here: https://github.com/facebook/react-native/issues/29073. – Taylour Oct 10 '20 at 20:37

0 Answers0