From 96ec805f599fcf05a7e3f0f90d4caa7d3c8e667f Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Wed, 4 Jul 2018 12:32:48 -0700 Subject: [PATCH] [fix] TextInput multiline value with onSubmitEditing Prevent a newline from being added when submitting a multiline text input using the "Enter" key. Fix #1013 --- .../src/exports/TextInput/__tests__/index-test.js | 11 ++++++++--- .../react-native-web/src/exports/TextInput/index.js | 2 ++ 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js b/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js index 93a9cb4a..5dd04755 100644 --- a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js @@ -368,6 +368,8 @@ describe('components/TextInput', () => { test('multi-line input with "blurOnSubmit" triggers "onSubmitEditing"', () => { const onSubmitEditing = jest.fn(); + const preventDefault = jest.fn(); + const input = findNativeTextarea( mount( { ); // shift+enter should enter newline, not submit - input.simulate('keyPress', { which: 13, shiftKey: true }); - input.simulate('keyPress', { which: 13 }); - expect(onSubmitEditing).toHaveBeenCalledTimes(1); + input.simulate('keyPress', { which: 13, preventDefault, shiftKey: true }); expect(onSubmitEditing).not.toHaveBeenCalledWith(expect.objectContaining({ shiftKey: true })); + expect(preventDefault).not.toHaveBeenCalled(); + + input.simulate('keyPress', { which: 13, preventDefault }); + expect(onSubmitEditing).toHaveBeenCalledTimes(1); + expect(preventDefault).toHaveBeenCalledTimes(1); }); }); diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js index ab72cf71..a6798094 100644 --- a/packages/react-native-web/src/exports/TextInput/index.js +++ b/packages/react-native-web/src/exports/TextInput/index.js @@ -376,6 +376,8 @@ class TextInput extends Component<*> { if (!e.isDefaultPrevented() && e.which === 13 && !e.shiftKey) { if ((blurOnSubmit || !multiline) && onSubmitEditing) { + // prevent "Enter" from inserting a newline + e.preventDefault(); e.nativeEvent = { target: e.target, text: e.target.value }; onSubmitEditing(e); }