React Native TextInput Field being cleared when onBlur is called

In my React Native app, if the user blurs a TextInput Field too quickly after typing, for example by hitting the submit key, then the field’s value is being updated to the empty string in both the store and on the screen.

If the user waits a second or two after they finish typing before hitting submit, then this issue does not occur.

Looking into this issue, I can see that the TextInput’s onBlur function is being called with the event.nativeEvent.text value equal to the empty string '' (even though the TextInput had a value before blurring the field), which I presume is being used by the onBlur function passed through by redux-form to update the field’s value in the store.

This suggests the problem lies somewhere in react-native, however I can’t recreate this behaviour reliably using just a TextInput - the problem becomes consistent when I apply redux-form’s Field to the input, so I am raising this issue here for now.

My current workaround is to overwrite the onBlur function like so:

<TextInput 
    {...input} 
    onBlur={() => input.onBlur()}
/>

This allows for validation to still take place but as the event object isn’t being passed, redux-form doesn’t update the field’s value in the store when onBlur occurs.

[fbarrailla]

Hi, I found a workaround who works well thanks to this answer : https://stackoverflow.com/a/40851395

You can actually pass the input.onBlur function to the onEndEditing prop of the field instead of onBlur.

ConnectedInput = ({ input: { onChange, onBlur, ...restInput } }) => (
  <TextInput
    onChangeText={onChange}
    onEndEditing={onBlur}
    {...restInput}
  />
)

[pvinis]

you can do onBlur={(evt) => input.onBlur(evt.nativeEvent.text)}