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;