fix(Textarea): ensure onKeyDown is called (#15419)

* fix(TextArea): ensure onKeyDown is called * test(TextArea): add onKeyDown test
carbon-design-system · Dec 27, 2023 · f790b03 · f790b03
1 parent 0382e35
commit f790b03
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 1 deletion.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -8245,6 +8245,9 @@ Map {
       "onClick": Object {
         "type": "func",
       },
+      "onKeyDown": Object {
+        "type": "func",
+      },
       "placeholder": Object {
         "type": "string",
       },

diff --git a/packages/react/src/components/TextArea/TextArea-test.js b/packages/react/src/components/TextArea/TextArea-test.js
@@ -341,6 +341,20 @@ describe('events', () => {
         await userEvent.keyboard('big blue');
         expect(onChange).toHaveBeenCalled();
       });
+
+      it('should invoke onKeyDown when textarea is keyed', async () => {
+        const onKeyDown = jest.fn();
+        render(
+          <TextArea
+            disabled={false}
+            id="testing"
+            labelText="testLabel"
+            onKeyDown={onKeyDown}
+          />
+        );
+        await userEvent.type(screen.getByLabelText('testLabel'), 'test');
+        expect(onKeyDown).toHaveBeenCalled();
+      });
     });
   });
 });
diff --git a/packages/react/src/components/TextArea/TextArea.tsx b/packages/react/src/components/TextArea/TextArea.tsx
@@ -104,6 +104,12 @@ export interface TextAreaProps
    */
   onClick?: (evt: React.MouseEvent<HTMLTextAreaElement>) => void;
 
+  /**
+   * Optionally provide an `onKeyDown` handler that is called whenever `<textarea>`
+   * is keyed
+   */
+  onKeyDown?: (evt: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+
   /**
    * Specify the placeholder attribute for the `<textarea>`
    */
@@ -154,6 +160,7 @@ const TextArea = React.forwardRef((props: TextAreaProps, forwardRef) => {
     hideLabel,
     onChange = noopFn,
     onClick = noopFn,
+    onKeyDown = noopFn,
     invalid = false,
     invalidText = '',
     helperText = '',
@@ -209,7 +216,7 @@ const TextArea = React.forwardRef((props: TextAreaProps, forwardRef) => {
 
   const textareaProps: {
     id: TextAreaProps['id'];
-    onKeyDown: (evt: React.KeyboardEvent) => void;
+    onKeyDown: TextAreaProps['onKeyDown'];
     onChange: TextAreaProps['onChange'];
     onClick: TextAreaProps['onClick'];
     maxLength?: number;
@@ -224,6 +231,10 @@ const TextArea = React.forwardRef((props: TextAreaProps, forwardRef) => {
           evt.preventDefault();
         }
       }
+
+      if (!disabled && onKeyDown) {
+        onKeyDown(evt);
+      }
     },
     onPaste: (evt) => {
       if (!disabled) {
@@ -546,6 +557,12 @@ TextArea.propTypes = {
    */
   onClick: PropTypes.func,
 
+  /**
+   * Optionally provide an `onKeyDown` handler that is called whenever `<textarea>`
+   * is keyed
+   */
+  onKeyDown: PropTypes.func,
+
   /**
    * Specify the placeholder attribute for the `<textarea>`
    */