mirror of
https://github.com/status-im/react-native.git
synced 2025-03-01 17:40:37 +00:00
Fix onSubmitEditing dispatch behavior with blurOnSubmit/multiline combinations.
Summary: Fixes https://github.com/facebook/react-native/issues/15863 on master. Behavior of `onSubmitEditing` is now consistent between iOS and Android. Tapping the submit button in a TextInput dispatches the event precisely when doing so does not make a newline (when blurOnSubmit is true or multiline is false). 1. Run this app on iOS and Android: ``` // flow import React, { Component } from 'react'; import { StyleSheet, TextInput, View } from 'react-native'; type State = { toggled: boolean }; type Props = { blurOnSubmit: boolean, multiline: boolean }; class ToggleColorInput extends Component<Props, State> { state: State = { toggled: false }; props: Props; toggle = () => { this.setState({ toggled: !this.state.toggled }); } render() { return ( <TextInput blurOnSubmit={this.props.blurOnSubmit} multiline={this.props.multiline} onSubmitEditing={this.toggle} style={[styles.textInput, {backgroundColor: this.state.toggled ? 'blue' : 'azure'}]} underlineColorAndroid='transparent' /> ) } } export default class App extends Component<{}> { render() { return ( <View> <ToggleColorInput blurOnSubmit={true} multiline={true} /> <ToggleColorInput blurOnSubmit={true} multiline={false} /> <ToggleColorInput blurOnSubmit={false} multiline={true} /> <ToggleColorInput blurOnSubmit={false} multiline={false} /> </View> ); } } const styles = StyleSheet.create({ textInput: { height: 75, borderWidth: 1, borderColor: 'black' } }); ``` 2. You see four TextInputs, with each combination of the `blurOnSubmit` and `multiline` properties. For each TextInput, type some text and tap the submit button. 3. The TextInputs in this test will toggle background color when they emit an `onSubmitEditing` event. Verify the following behavior on each platform: * blurOnSubmit && isMultiline => Submit event emitted, blurred, no newline inserted * blurOnSubmit && !isMultiline => Submit event emitted, blurred * !blurOnSubmit && isMultiline => Submit event emitted, newline inserted * !blurOnSubmit && !isMultiline => Submit event emitted Closes https://github.com/facebook/react-native/pull/16040 Differential Revision: D5877401 Pulled By: shergin fbshipit-source-id: 741bcc06d8b69d7025f2cb42dd0bee4fa01cd88e
This commit is contained in:
parent
aa8eb806ca
commit
4d54b48167
@ -737,12 +737,12 @@ public class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
|
||||
InputType.TYPE_TEXT_FLAG_MULTI_LINE) != 0);
|
||||
|
||||
// Motivation:
|
||||
// * blurOnSubmit && isMultiline => Generate `submit` event; clear focus; prevent default behaviour (return true);
|
||||
// * blurOnSubmit && !isMultiline => Generate `submit` event; clear focus; prevent default behaviour (return true);
|
||||
// * blurOnSubmit && isMultiline => Clear focus; prevent default behaviour (return true);
|
||||
// * blurOnSubmit && !isMultiline => Clear focus; prevent default behaviour (return true);
|
||||
// * !blurOnSubmit && isMultiline => Perform default behaviour (return false);
|
||||
// * !blurOnSubmit && !isMultiline => Prevent default behaviour (return true).
|
||||
// Additionally we always generate a `submit` event.
|
||||
|
||||
if (blurOnSubmit) {
|
||||
EventDispatcher eventDispatcher =
|
||||
reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher();
|
||||
|
||||
@ -751,9 +751,11 @@ public class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
|
||||
editText.getId(),
|
||||
editText.getText().toString()));
|
||||
|
||||
if (blurOnSubmit) {
|
||||
editText.clearFocus();
|
||||
}
|
||||
|
||||
// Prevent default behavior except when we want it to insert a newline.
|
||||
return blurOnSubmit || !isMultiline;
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user