Skip to content

Commit

Permalink
Fix onSubmitEditing dispatch behavior with blurOnSubmit/multiline com…
Browse files Browse the repository at this point in the history
…binations.

Summary:
Fixes facebook#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 facebook#16040

Differential Revision: D5877401

Pulled By: shergin

fbshipit-source-id: 741bcc06d8b69d7025f2cb42dd0bee4fa01cd88e
(cherry picked from commit 4d54b48)
  • Loading branch information
AdamDanielKing authored and ethul committed Mar 10, 2020
1 parent 6a35284 commit b5e6301
Showing 1 changed file with 11 additions and 9 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -733,23 +733,25 @@ public boolean onEditorAction(TextView v, int actionId, KeyEvent keyEvent) {
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();
EventDispatcher eventDispatcher =
reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher();

eventDispatcher.dispatchEvent(
new ReactTextInputSubmitEditingEvent(
editText.getId(),
editText.getText().toString()));
eventDispatcher.dispatchEvent(
new ReactTextInputSubmitEditingEvent(
editText.getId(),
editText.getText().toString()));

if (blurOnSubmit) {
editText.clearFocus();
}

// Prevent default behavior except when we want it to insert a newline.
return blurOnSubmit || !isMultiline;
}

Expand Down

0 comments on commit b5e6301

Please sign in to comment.