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 13b07ec9..d00c4e65 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 @@ -180,6 +180,25 @@ describe('components/TextInput', () => { }); describe('prop "onKeyPress"', () => { + test('arrow key', () => { + const onKeyPress = jest.fn(); + const input = findNativeInput(mount()); + input.simulate('keyPress', { which: 37 }); + expect(onKeyPress).toHaveBeenCalledTimes(1); + expect(onKeyPress).toBeCalledWith( + expect.objectContaining({ + nativeEvent: { + altKey: undefined, + ctrlKey: undefined, + key: 'ArrowLeft', + metaKey: undefined, + shiftKey: undefined, + target: expect.anything() + } + }) + ); + }); + test('backspace key', () => { const onKeyPress = jest.fn(); const input = findNativeInput(mount()); @@ -199,25 +218,6 @@ describe('components/TextInput', () => { ); }); - test('tab key', () => { - const onKeyPress = jest.fn(); - const input = findNativeInput(mount()); - input.simulate('keyDown', { which: 9 }); - expect(onKeyPress).toHaveBeenCalledTimes(1); - expect(onKeyPress).toBeCalledWith( - expect.objectContaining({ - nativeEvent: { - altKey: undefined, - ctrlKey: undefined, - key: 'Tab', - metaKey: undefined, - shiftKey: undefined, - target: expect.anything() - } - }) - ); - }); - test('enter key', () => { const onKeyPress = jest.fn(); const input = findNativeInput(mount()); @@ -237,6 +237,25 @@ describe('components/TextInput', () => { ); }); + test('escape key', () => { + const onKeyPress = jest.fn(); + const input = findNativeInput(mount()); + input.simulate('keyPress', { which: 27 }); + expect(onKeyPress).toHaveBeenCalledTimes(1); + expect(onKeyPress).toBeCalledWith( + expect.objectContaining({ + nativeEvent: { + altKey: undefined, + ctrlKey: undefined, + key: 'Escape', + metaKey: undefined, + shiftKey: undefined, + target: expect.anything() + } + }) + ); + }); + test('space key', () => { const onKeyPress = jest.fn(); const input = findNativeInput(mount()); @@ -256,17 +275,17 @@ describe('components/TextInput', () => { ); }); - test('arrow key', () => { + test('tab key', () => { const onKeyPress = jest.fn(); const input = findNativeInput(mount()); - input.simulate('keyPress', { which: 37 }); + input.simulate('keyDown', { which: 9 }); expect(onKeyPress).toHaveBeenCalledTimes(1); expect(onKeyPress).toBeCalledWith( expect.objectContaining({ nativeEvent: { altKey: undefined, ctrlKey: undefined, - key: 'ArrowLeft', + key: 'Tab', metaKey: undefined, shiftKey: undefined, target: expect.anything() diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js index 9d3154af..71a7bbdc 100644 --- a/packages/react-native-web/src/exports/TextInput/index.js +++ b/packages/react-native-web/src/exports/TextInput/index.js @@ -317,11 +317,13 @@ class TextInput extends Component<*> { // Prevent key events bubbling (see #612) e.stopPropagation(); - // Backspace, Tab, Cmd+Enter, and Arrow keys only fire 'keydown' DOM events + // Backspace, Escape, Tab, Cmd+Enter, and Arrow keys only fire 'keydown' + // DOM events if ( e.which === 8 || e.which === 9 || (e.which === 13 && e.metaKey) || + e.which === 27 || e.which === 37 || e.which === 38 || e.which === 39 || @@ -348,6 +350,9 @@ class TextInput extends Component<*> { case 13: keyValue = 'Enter'; break; + case 27: + keyValue = 'Escape'; + break; case 32: keyValue = ' '; break;