Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[RN 0.48.2 TextInput] onSubmitEditing not called if blurOnSubmit set to false

See original GitHub issue

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

react-native -v: 0.48.2
node -v: 8.4.0
npm -v: 4.6.1
yarn --version:

Target Platform: iOS, Android

Development Operating System: macOS Sierra 10.12.6

Build tools: react-native run-ios react-native run-android

Steps to Reproduce

<TextInput 
  blurOnSubmit={false} 
  onSubmitEditing={() => alert('!!!')} 
  returnKeyType={'done'}
/>

If I press the done button onSubmitEditing callback not called

Expected Behavior

onSubmitEditing should be called for blurOnSubmit={false} text inputs

Reproducible Demo

https://snack.expo.io/S1tMt619b but I don’t know how to turn on the last RN version there

Issue Analytics

State:
Created 6 years ago
Reactions:9
Comments:20 (13 by maintainers)

Top GitHub Comments

5reactions

AdamDanielKingcommented, Sep 20, 2017

Could someone weigh in on the desired behavior when tapping the submit button?

Currently (before the changes I’m making) we have on Android:

blurOnSubmit && isMultiline => Generate submit event, blur, do not insert newline
blurOnSubmit && !isMultiline => Generate submit event, blur
!blurOnSubmit && isMultiline => Insert newline
!blurOnSubmit && !isMultiline => Do nothing

And on iOS we have (on master, not 0.48.2):

blurOnSubmit && isMultiline => Generate submit event, blur, do not insert newline
blurOnSubmit && !isMultiline => Generate submit event, blur
!blurOnSubmit && isMultiline => Generate submit event, insert newline
!blurOnSubmit && !isMultiline => Generate submit event

I modified the Android behavior so that it generates a submit event for the last case. And I reconciled the iOS behavior with that:

blurOnSubmit && isMultiline => Generate submit event, blur, do not insert newline
blurOnSubmit && !isMultiline => Generate submit event, blur
!blurOnSubmit && isMultiline => Insert newline
!blurOnSubmit && !isMultiline => Generate submit event

The current documentation for onBlurSubmit supports the behavior of the first case. But the documentation for onSubmitEditing says the submit event is “invalid” if multiline is set (a contradiction in the first case).

Does this new behavior seem correct? Is there any reason to still dispatch the submit event in the third case, when a newline is also inserted?

1reaction

shergincommented, Sep 14, 2017

@hblumberg Yes, Expo SDK 20 is based on RN 47. I will try to repro this on master.

Top Results From Across the Web

RN 0.48.2 TextInput onSubmitEditing blurOnSubmit={false}

RN 0.48.2 TextInput onSubmitEditing blurOnSubmit={false}. [RN 0.48.2 TextInput] onSubmitEditing not called if blurOnSubmit set to false. Open with Expo Go.

textinput text not submitting using onsubmitEditing using ...

you have to pass text from submit event to the function, <TextInput onSubmitEditing={(event) => this.onSubmit(event.nativeEvent.text)} />.

types/react-native/index.d.ts - UNPKG

187, * Adds a listener to be invoked when events of the specified type are ... 1193, * If `false`, TextInput always asks...

TextInput · React Native

If true , focuses the input on componentDidMount . The default value is false . Type, Required. bool, No. blurOnSubmit.

Focus on the Next TextInput when Next Keyboard Button is ...

Then we need to add 3 props to our first input returnKeyType , onSubmitEditing , and blurOnSubmit set to false. <TextInput placeholder="First Name" ......