Add onKeyDown to TextField and TextArea

CHANGELOG.md

@@ -9,6 +9,8 @@
 ### Minor
 
 * Internal: Turn on sketchy-number flow lint rules as an error (#293)
+* TextArea: Add an onKeyDown prop
+* TextField: Add an onKeyDown prop
 
 ### Patch
 

docs/src/TextArea.doc.js

@@ -44,16 +44,24 @@ card(
       },
       {
         name: 'onBlur',
-        type: '({ event: SyntheticFocusEvent<>, value: string }) => void',
+        type:
+          '({ event: SyntheticFocusEvent<HTMLTextAreaElement>, value: string }) => void',
       },
       {
         name: 'onChange',
-        type: '({ event: SyntheticInputEvent<>, value: string }) => void',
+        type:
+          '({ event: SyntheticInputEvent<HTMLTextAreaElement>, value: string }) => void',
         required: true,
       },
       {
         name: 'onFocus',
-        type: '({ event: SyntheticFocusEvent<>, value: string }) => void',
+        type:
+          '({ event: SyntheticFocusEvent<HTMLTextAreaElement>, value: string }) => void',
+      },
+      {
+        name: 'onKeyDown',
+        type:
+          '({ event: SyntheticKeyboardEvent<HTMLTextAreaElement>, value: string }) => void',
       },
       {
         name: 'placeholder',

docs/src/TextField.doc.js

@@ -45,16 +45,24 @@ card(
       },
       {
         name: 'onBlur',
-        type: '({ event: SyntheticFocusEvent<>, value: string }) => void',
+        type:
+          '({ event: SyntheticFocusEvent<HTMLInputElement>, value: string }) => void',
       },
       {
         name: 'onChange',
-        type: '({ event: SyntheticInputEvent<>, value: string }) => void',
+        type:
+          '({ event: SyntheticInputEvent<HTMLInputElement>, value: string }) => void',
         required: true,
       },
       {
         name: 'onFocus',
-        type: '({ event: SyntheticFocusEvent<>, value: string }) => void',
+        type:
+          '({ event: SyntheticFocusEvent<HTMLInputElement>, value: string }) => void',
+      },
+      {
+        name: 'onKeyDown',
+        type:
+          '({ event: SyntheticKeyboardEvent<HTMLInputElement>, value: string }) => void',
       },
       {
         name: 'placeholder',

packages/gestalt/src/TextArea.js

@@ -21,9 +21,22 @@ type Props = {|
   id: string,
   idealErrorDirection?: 'up' | 'right' | 'down' | 'left' /* default: right */,
   name?: string,
-  onBlur?: ({ event: SyntheticFocusEvent<>, value: string }) => void,
-  onChange: ({ event: SyntheticInputEvent<>, value: string }) => void,
-  onFocus?: ({ event: SyntheticFocusEvent<>, value: string }) => void,
+  onBlur?: ({
+    event: SyntheticFocusEvent<HTMLTextAreaElement>,
+    value: string,
+  }) => void,
+  onChange: ({
+    event: SyntheticInputEvent<HTMLTextAreaElement>,
+    value: string,
+  }) => void,
+  onFocus?: ({
+    event: SyntheticFocusEvent<HTMLTextAreaElement>,
+    value: string,
+  }) => void,
+  onKeyDown?: ({
+    event: SyntheticKeyboardEvent<HTMLTextAreaElement>,
+    value: string,
+  }) => void,
   placeholder?: string,
   rows?: number /* default: 3 */,
   value?: string,
@@ -40,6 +53,7 @@ export default class TextArea extends React.Component<Props, State> {
     onBlur: PropTypes.func,
     onChange: PropTypes.func.isRequired,
     onFocus: PropTypes.func,
+    onKeyDown: PropTypes.func,
     placeholder: PropTypes.string,
     rows: PropTypes.number,
     value: PropTypes.string,
@@ -68,39 +82,46 @@ export default class TextArea extends React.Component<Props, State> {
     return null;
   }
 
-  handleChange = (event: SyntheticInputEvent<>) => {
-    if (event.target instanceof HTMLTextAreaElement) {
-      this.props.onChange({
-        event,
-        value: event.target.value,
-      });
+  handleChange = (event: SyntheticInputEvent<HTMLTextAreaElement>) => {
+    this.props.onChange({
+      event,
+      value: event.currentTarget.value,
+    });
 
-      if (this.props.errorMessage) {
-        this.setState({ errorIsOpen: true });
-      }
+    if (this.props.errorMessage) {
+      this.setState({ errorIsOpen: true });
     }
   };
 
-  handleBlur = (event: SyntheticFocusEvent<>) => {
+  handleBlur = (event: SyntheticFocusEvent<HTMLTextAreaElement>) => {
     if (this.props.errorMessage) {
       this.setState({ errorIsOpen: false });
     }
-    if (event.target instanceof HTMLTextAreaElement && this.props.onBlur) {
+    if (this.props.onBlur) {
       this.props.onBlur({
         event,
-        value: event.target.value,
+        value: event.currentTarget.value,
       });
     }
   };
 
-  handleFocus = (event: SyntheticFocusEvent<>) => {
+  handleFocus = (event: SyntheticFocusEvent<HTMLTextAreaElement>) => {
     if (this.props.errorMessage) {
       this.setState({ errorIsOpen: true });
     }
-    if (event.target instanceof HTMLTextAreaElement && this.props.onFocus) {
+    if (this.props.onFocus) {
       this.props.onFocus({
         event,
-        value: event.target.value,
+        value: event.currentTarget.value,
+      });
+    }
+  };
+
+  handleKeyDown = (event: SyntheticKeyboardEvent<HTMLTextAreaElement>) => {
+    if (this.props.onKeyDown) {
+      this.props.onKeyDown({
+        event,
+        value: event.currentTarget.value,
       });
     }
   };
@@ -140,6 +161,7 @@ export default class TextArea extends React.Component<Props, State> {
           onBlur={this.handleBlur}
           onChange={this.handleChange}
           onFocus={this.handleFocus}
+          onKeyDown={this.handleKeyDown}
           placeholder={placeholder}
           ref={c => {
             this.textarea = c;

packages/gestalt/src/TextArea.test.js

@@ -81,4 +81,58 @@ describe('TextArea', () => {
     });
     expect(tree.find(Flyout)).toHaveLength(1);
   });
+
+  it('handles blur events', () => {
+    const mockBlur = jest.fn();
+    const tree = shallow(
+      <TextArea id="test" onBlur={mockBlur} onChange={jest.fn()} />
+    );
+    tree
+      .find('textarea')
+      .simulate('blur', { currentTarget: { value: 'fake value' } });
+    expect(mockBlur).toHaveBeenCalledWith({
+      event: { currentTarget: { value: 'fake value' } },
+      value: 'fake value',
+    });
+  });
+
+  it('handles change events', () => {
+    const mockChange = jest.fn();
+    const tree = shallow(<TextArea id="test" onChange={mockChange} />);
+    tree
+      .find('textarea')
+      .simulate('change', { currentTarget: { value: 'fake value' } });
+    expect(mockChange).toHaveBeenCalledWith({
+      event: { currentTarget: { value: 'fake value' } },
+      value: 'fake value',
+    });
+  });
+
+  it('handles focus events', () => {
+    const mockFocus = jest.fn();
+    const tree = shallow(
+      <TextArea id="test" onChange={jest.fn()} onFocus={mockFocus} />
+    );
+    tree
+      .find('textarea')
+      .simulate('focus', { currentTarget: { value: 'fake value' } });
+    expect(mockFocus).toHaveBeenCalledWith({
+      event: { currentTarget: { value: 'fake value' } },
+      value: 'fake value',
+    });
+  });
+
+  it('handles key down events', () => {
+    const mockKeyDown = jest.fn();
+    const tree = shallow(
+      <TextArea id="test" onChange={jest.fn()} onKeyDown={mockKeyDown} />
+    );
+    tree
+      .find('textarea')
+      .simulate('keyDown', { currentTarget: { value: 'fake value' } });
+    expect(mockKeyDown).toHaveBeenCalledWith({
+      event: { currentTarget: { value: 'fake value' } },
+      value: 'fake value',
+    });
+  });
 });

packages/gestalt/src/TextField.js

@@ -22,9 +22,22 @@ type Props = {|
   id: string,
   idealErrorDirection?: 'up' | 'right' | 'down' | 'left' /* default: right */,
   name?: string,
-  onBlur?: ({ event: SyntheticFocusEvent<>, value: string }) => void,
-  onChange: ({ event: SyntheticInputEvent<>, value: string }) => void,
-  onFocus?: ({ event: SyntheticFocusEvent<>, value: string }) => void,
+  onBlur?: ({
+    event: SyntheticFocusEvent<HTMLInputElement>,
+    value: string,
+  }) => void,
+  onChange: ({
+    event: SyntheticInputEvent<HTMLInputElement>,
+    value: string,
+  }) => void,
+  onFocus?: ({
+    event: SyntheticFocusEvent<HTMLInputElement>,
+    value: string,
+  }) => void,
+  onKeyDown?: ({
+    event: SyntheticKeyboardEvent<HTMLInputElement>,
+    value: string,
+  }) => void,
   placeholder?: string,
   type?: 'date' | 'email' | 'number' | 'password' | 'text' | 'url',
   value?: string,
@@ -47,6 +60,7 @@ export default class TextField extends React.Component<Props, State> {
     onBlur: PropTypes.func,
     onChange: PropTypes.func.isRequired,
     onFocus: PropTypes.func,
+    onKeyDown: PropTypes.func,
     placeholder: PropTypes.string,
     type: PropTypes.oneOf([
       'date',
@@ -82,35 +96,42 @@ export default class TextField extends React.Component<Props, State> {
     return null;
   }
 
-  handleChange = (event: SyntheticInputEvent<>) => {
-    if (event.target instanceof HTMLInputElement) {
-      this.props.onChange({
-        event,
-        value: event.target.value,
-      });
-    }
+  handleChange = (event: SyntheticInputEvent<HTMLInputElement>) => {
+    this.props.onChange({
+      event,
+      value: event.currentTarget.value,
+    });
   };
 
-  handleBlur = (event: SyntheticFocusEvent<>) => {
+  handleBlur = (event: SyntheticFocusEvent<HTMLInputElement>) => {
     if (this.props.errorMessage) {
       this.setState({ errorIsOpen: false });
     }
-    if (event.target instanceof HTMLInputElement && this.props.onBlur) {
+    if (this.props.onBlur) {
       this.props.onBlur({
         event,
-        value: event.target.value,
+        value: event.currentTarget.value,
       });
     }
   };
 
-  handleFocus = (event: SyntheticFocusEvent<>) => {
+  handleFocus = (event: SyntheticFocusEvent<HTMLInputElement>) => {
     if (this.props.errorMessage) {
       this.setState({ errorIsOpen: true });
     }
-    if (event.target instanceof HTMLInputElement && this.props.onFocus) {
+    if (this.props.onFocus) {
       this.props.onFocus({
         event,
-        value: event.target.value,
+        value: event.currentTarget.value,
+      });
+    }
+  };
+
+  handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
+    if (this.props.onKeyDown) {
+      this.props.onKeyDown({
+        event,
+        value: event.currentTarget.value,
       });
     }
   };
@@ -156,6 +177,7 @@ export default class TextField extends React.Component<Props, State> {
           onBlur={this.handleBlur}
           onChange={this.handleChange}
           onFocus={this.handleFocus}
+          onKeyDown={this.handleKeyDown}
           pattern={pattern}
           placeholder={placeholder}
           ref={c => {

packages/gestalt/src/TextField.test.js

@@ -114,4 +114,58 @@ describe('TextField', () => {
     ).html();
     expect(tree).toMatchSnapshot();
   });
+
+  it('handles blur events', () => {
+    const mockBlur = jest.fn();
+    const tree = shallow(
+      <TextField id="test" onBlur={mockBlur} onChange={jest.fn()} />
+    );
+    tree
+      .find('input')
+      .simulate('blur', { currentTarget: { value: 'fake value' } });
+    expect(mockBlur).toHaveBeenCalledWith({
+      event: { currentTarget: { value: 'fake value' } },
+      value: 'fake value',
+    });
+  });
+
+  it('handles change events', () => {
+    const mockChange = jest.fn();
+    const tree = shallow(<TextField id="test" onChange={mockChange} />);
+    tree
+      .find('input')
+      .simulate('change', { currentTarget: { value: 'fake value' } });
+    expect(mockChange).toHaveBeenCalledWith({
+      event: { currentTarget: { value: 'fake value' } },
+      value: 'fake value',
+    });
+  });
+
+  it('handles focus events', () => {
+    const mockFocus = jest.fn();
+    const tree = shallow(
+      <TextField id="test" onChange={jest.fn()} onFocus={mockFocus} />
+    );
+    tree
+      .find('input')
+      .simulate('focus', { currentTarget: { value: 'fake value' } });
+    expect(mockFocus).toHaveBeenCalledWith({
+      event: { currentTarget: { value: 'fake value' } },
+      value: 'fake value',
+    });
+  });
+
+  it('handles key down events', () => {
+    const mockKeyDown = jest.fn();
+    const tree = shallow(
+      <TextField id="test" onChange={jest.fn()} onKeyDown={mockKeyDown} />
+    );
+    tree
+      .find('input')
+      .simulate('keyDown', { currentTarget: { value: 'fake value' } });
+    expect(mockKeyDown).toHaveBeenCalledWith({
+      event: { currentTarget: { value: 'fake value' } },
+      value: 'fake value',
+    });
+  });
 });