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:
Adam King 2017-09-20 16:26:41 -07:00 committed by Facebook Github Bot
parent aa8eb806ca
commit 4d54b48167

View File

@ -737,23 +737,25 @@ public class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
InputType.TYPE_TEXT_FLAG_MULTI_LINE) != 0); InputType.TYPE_TEXT_FLAG_MULTI_LINE) != 0);
// Motivation: // Motivation:
// * blurOnSubmit && isMultiline => Generate `submit` event; clear focus; prevent default behaviour (return true); // * blurOnSubmit && isMultiline => 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 => Perform default behaviour (return false); // * !blurOnSubmit && isMultiline => Perform default behaviour (return false);
// * !blurOnSubmit && !isMultiline => Prevent default behaviour (return true). // * !blurOnSubmit && !isMultiline => Prevent default behaviour (return true).
// Additionally we always generate a `submit` event.
EventDispatcher eventDispatcher =
reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher();
eventDispatcher.dispatchEvent(
new ReactTextInputSubmitEditingEvent(
editText.getId(),
editText.getText().toString()));
if (blurOnSubmit) { if (blurOnSubmit) {
EventDispatcher eventDispatcher =
reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher();
eventDispatcher.dispatchEvent(
new ReactTextInputSubmitEditingEvent(
editText.getId(),
editText.getText().toString()));
editText.clearFocus(); editText.clearFocus();
} }
// Prevent default behavior except when we want it to insert a newline.
return blurOnSubmit || !isMultiline; return blurOnSubmit || !isMultiline;
} }