diff --git a/src/components/TextInput/__tests__/index-test.js b/src/components/TextInput/__tests__/index-test.js
index 4b5cd735..c72870a5 100644
--- a/src/components/TextInput/__tests__/index-test.js
+++ b/src/components/TextInput/__tests__/index-test.js
@@ -109,105 +109,165 @@ describe('components/TextInput', () => {
expect(input.prop('rows')).toEqual(3);
});
- test('prop "onBlur"', done => {
+ test('prop "onBlur"', () => {
+ const onBlur = jest.fn();
const input = findNativeInput(mount());
input.simulate('blur');
- function onBlur(e) {
- expect(e).toBeTruthy();
- done();
- }
+ expect(onBlur).toHaveBeenCalledTimes(1);
});
- test('prop "onChange"', done => {
+ test('prop "onChange"', () => {
+ const onChange = jest.fn();
const input = findNativeInput(mount());
input.simulate('change');
- function onChange(e) {
- expect(e).toBeTruthy();
- done();
- }
+ expect(onChange).toHaveBeenCalledTimes(1);
});
- test('prop "onChangeText"', done => {
+ test('prop "onChangeText"', () => {
+ const onChangeText = jest.fn();
const newText = 'newText';
const input = findNativeInput(mount());
input.simulate('change', { target: { value: newText } });
- function onChangeText(text) {
- expect(text).toEqual(newText);
- done();
- }
+ expect(onChangeText).toHaveBeenCalledTimes(1);
+ expect(onChangeText).toBeCalledWith(newText);
});
- test('prop "onFocus"', done => {
+ test('prop "onFocus"', () => {
+ const onFocus = jest.fn();
const input = findNativeInput(mount());
input.simulate('focus');
- function onFocus(e) {
- expect(e).toBeTruthy();
- done();
- }
+ expect(onFocus).toHaveBeenCalledTimes(1);
});
describe('prop "onKeyPress"', () => {
- test('enter key', done => {
- const input = findNativeInput(mount());
- input.simulate('keyPress', { which: 13 });
- function onKeyPress(e) {
- expect(e.nativeEvent.key).toEqual('Enter');
- done();
- }
- });
-
- test('space key', done => {
- const input = findNativeInput(mount());
- input.simulate('keyPress', { which: 32 });
- function onKeyPress(e) {
- expect(e.nativeEvent.key).toEqual(' ');
- done();
- }
- });
-
- test('backspace key', done => {
+ test('backspace key', () => {
+ const onKeyPress = jest.fn();
const input = findNativeInput(mount());
input.simulate('keyDown', { which: 8 });
- function onKeyPress(e) {
- expect(e.nativeEvent.key).toEqual('Backspace');
- done();
- }
+ expect(onKeyPress).toHaveBeenCalledTimes(1);
+ expect(onKeyPress).toBeCalledWith(
+ expect.objectContaining({
+ nativeEvent: {
+ altKey: undefined,
+ ctrlKey: undefined,
+ key: 'Backspace',
+ metaKey: undefined,
+ shiftKey: undefined,
+ target: expect.anything()
+ }
+ })
+ );
});
- test('text key', done => {
+ 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());
+ input.simulate('keyPress', { which: 13 });
+ expect(onKeyPress).toHaveBeenCalledTimes(1);
+ expect(onKeyPress).toBeCalledWith(
+ expect.objectContaining({
+ nativeEvent: {
+ altKey: undefined,
+ ctrlKey: undefined,
+ key: 'Enter',
+ metaKey: undefined,
+ shiftKey: undefined,
+ target: expect.anything()
+ }
+ })
+ );
+ });
+
+ test('space key', () => {
+ const onKeyPress = jest.fn();
+ const input = findNativeInput(mount());
+ input.simulate('keyPress', { which: 32 });
+ expect(onKeyPress).toHaveBeenCalledTimes(1);
+ expect(onKeyPress).toBeCalledWith(
+ expect.objectContaining({
+ nativeEvent: {
+ altKey: undefined,
+ ctrlKey: undefined,
+ key: ' ',
+ metaKey: undefined,
+ shiftKey: undefined,
+ target: expect.anything()
+ }
+ })
+ );
+ });
+
+ test('text key', () => {
+ const onKeyPress = jest.fn();
const input = findNativeInput(mount());
input.simulate('keyPress', { which: 97 });
- function onKeyPress(e) {
- expect(e.nativeEvent.key).toEqual('a');
- done();
- }
+ expect(onKeyPress).toHaveBeenCalledTimes(1);
+ expect(onKeyPress).toBeCalledWith(
+ expect.objectContaining({
+ nativeEvent: {
+ altKey: undefined,
+ ctrlKey: undefined,
+ key: 'a',
+ metaKey: undefined,
+ shiftKey: undefined,
+ target: expect.anything()
+ }
+ })
+ );
});
- test('target element is included', done => {
- const input = findNativeInput(mount());
- input.simulate('keyPress');
- function onKeyPress(e) {
- expect(e.nativeEvent.target).toBeDefined();
- done();
- }
- });
-
- test('modifier keys are included', done => {
+ test('modifier keys are included', () => {
+ const onKeyPress = jest.fn();
const input = findNativeInput(mount());
input.simulate('keyPress', {
altKey: true,
ctrlKey: true,
metaKey: true,
shiftKey: true,
- which: 97
+ which: 32
});
- function onKeyPress(e) {
- expect(e.nativeEvent.altKey).toEqual(true);
- expect(e.nativeEvent.ctrlKey).toEqual(true);
- expect(e.nativeEvent.metaKey).toEqual(true);
- expect(e.nativeEvent.shiftKey).toEqual(true);
- done();
- }
+ expect(onKeyPress).toHaveBeenCalledTimes(1);
+ expect(onKeyPress).toBeCalledWith(
+ expect.objectContaining({
+ nativeEvent: {
+ altKey: true,
+ ctrlKey: true,
+ key: ' ',
+ metaKey: true,
+ shiftKey: true,
+ target: expect.anything()
+ }
+ })
+ );
+ });
+
+ test('meta key + Enter calls "onKeyPress"', () => {
+ const onKeyPress = jest.fn();
+ const input = findNativeInput(mount());
+ input.simulate('keyDown', {
+ metaKey: true,
+ which: 13
+ });
+ expect(onKeyPress).toHaveBeenCalledTimes(1);
});
});
diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js
index 604242fa..40e85268 100644
--- a/src/components/TextInput/index.js
+++ b/src/components/TextInput/index.js
@@ -301,9 +301,9 @@ class TextInput extends Component {
};
_handleKeyDown = e => {
- const { onKeyPress } = this.props;
- if (onKeyPress && e.which === 8) {
- onKeyPress({ nativeEvent: { key: 'Backspace' } });
+ // Backspace, Tab, and Cmd+Enter only fire 'keydown' DOM events
+ if (e.which === 8 || e.which === 9 || (e.which === 13 && e.metaKey)) {
+ this._handleKeyPress(e);
}
};
@@ -314,23 +314,35 @@ class TextInput extends Component {
if (onKeyPress) {
let keyValue;
- // enter
- if (e.which === 13) {
- keyValue = 'Enter';
- } else if (e.which === 32) {
- // space
- keyValue = ' ';
- } else {
- // we trim to only care about the keys that has a textual representation
- if (e.shiftKey) {
- keyValue = String.fromCharCode(e.which).trim();
- } else {
- keyValue = String.fromCharCode(e.which).toLowerCase().trim();
+ switch (e.which) {
+ // backspace
+ case 8:
+ keyValue = 'Backspace';
+ break;
+ // tab
+ case 9:
+ keyValue = 'Tab';
+ break;
+ // enter
+ case 13:
+ keyValue = 'Enter';
+ break;
+ // spacebar
+ case 32:
+ keyValue = ' ';
+ break;
+ default: {
+ // we trim to only care about the keys that has a textual representation
+ if (e.shiftKey) {
+ keyValue = String.fromCharCode(e.which).trim();
+ } else {
+ keyValue = String.fromCharCode(e.which).toLowerCase().trim();
+ }
}
}
if (keyValue) {
- const nativeEvent = {
+ e.nativeEvent = {
altKey: e.altKey,
ctrlKey: e.ctrlKey,
key: keyValue,
@@ -338,7 +350,7 @@ class TextInput extends Component {
shiftKey: e.shiftKey,
target: e.target
};
- onKeyPress({ nativeEvent });
+ onKeyPress(e);
}
}