onSubmitEditing event is firing twice on android

[bhrott]

Issue Description

onSubmitEditing event is firing twice on android.

Steps to Reproduce / Code Snippets

Create the following code:

  _onChangeText(text) {
        this.setState({
            text
        });
    }

    _onSubmit(event) {
        this.props.onSubmit(this.state.text);
    }

<TextInput
                    ref='txtSearch'
                    maxLength={20}
                    returnKeyType='search'
                    placeholder={'Search here'}
                    underlineColorAndroid='rgba(0,0,0,0)'
                    onChangeText={text => this._onChangeText(text)}
                    onSubmitEditing={event => this._onSubmit(event)}></TextInput>

Then, tap on the field, type something and tap the search button on keyboard.

Expected Results

On iOS it works perfectly (the _onSubmit method is called only one time) but on Android it is calling two times.

Additional Information

• React Native version: 0.35.0
• Platform(s) (iOS, Android, or both?): Android
• Operating System (macOS, Linux, or Windows?): macOS

[felipemartim]

Same thing here.

I had to implement the following workaround for now:

  let timeout
  ...
  _onSubmit = () => {
    if (timeout) clearTimeout(timeout)
    timeout = setTimeout(() => {
      //code here
    }, 1000)
  };

[regrex]

Same thing here.

[ixiangfeng]

0.34 also appear twice on android, works perfect on iOS

[reneweb]

The problem is that Android fires two EditorAction events when pressing the search button. It will fire one for the enter/submit action and another one for search action (https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java#L695). In Android these will have different id's (actionId) and this can be used to filter only for the relevant events and therefore only handle the action once. However, it seems like we do not pass that information to the JS side, so there is no easy way to differentiate between these event types.

Generally I see two options to fix the issue:

• We pass the actionId to the JS side, such that the user can filter based on that. This would still leave it inconsistent to IOS and rather unintuitive, since there would still be two calls.
• We filter on the Android side and only fire enter action events from there, so we end up with only one event being fired. For this, we will need to make sure that this will work as desired in every case.

I will dig a little further into the second option, as this one would create a consistent experience, and see if that works, unless, of course, someone has a better idea how to fix it.

[heartAndRain]

same thing here, and it won't blur when press search button even I have set blurOnSubmit true，it works well on iOS

RN Version: 0.36.0

[kunkun12]

same thing here RN Version 0.39 Android

[ddeanto]

same thing here as well RN Version 0.39 Android

[rangav]

setting blurOnSubmit={false} worked for me on android

[dwilt]

@rangav yea this is true but it doesn't hide the keyboard then.

[ddeanto]

@dwilt the only workaround I found was to set blurOnSubmit={false} and to manually close the keyboard in the onSubmitEditing prop.

Check out https://github.com/DanielMSchmidt/react-native-dismiss-keyboard

I used it like this:

onSubmitEditing={() => {
  dismissKeyboard();
 // other stuff
}}

[dwilt]

@ddeanto I don't think I like this as much cause the keyboard would show for a bit, no?

I debounced inside of the component:

(edited for brevity)

import debounce from 'debounce';
// ...
// redefined the onSubmit prop with a debounce
// hack fix for https://github.com/facebook/react-native/issues/10443
onSubmit = Platform.OS === 'android' ? debounce(this.props.onSubmit, 200) : this.props.onSubmit;
// ...
<TextInput
    onSubmitEditing={this.onSubmit}
/>

[jasan-s]

I'm still seeing this issue on RN 0.45.1. what is the accepted solution?