From d65b947c84c44fd424e312bc93bafbe9503b9502 Mon Sep 17 00:00:00 2001
From: Derek Hassan <dhass421@gmail.com>
Date: Thu, 9 Feb 2023 09:20:29 -0500
Subject: [PATCH] refactor: change all onKeyPress uses to use onKeyDown instead
 (#927)

---
 packages/card/components/ButtonCard.tsx            | 14 +++++++-------
 packages/clickable/README.md                       |  2 +-
 packages/clickable/components/clickable.tsx        |  6 +++---
 packages/clickable/tests/clickable.test.tsx        | 14 +++++++-------
 .../textInput/components/TextInputWithBadges.tsx   |  8 --------
 5 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/packages/card/components/ButtonCard.tsx b/packages/card/components/ButtonCard.tsx
index ca0206a26..8a0b63a76 100644
--- a/packages/card/components/ButtonCard.tsx
+++ b/packages/card/components/ButtonCard.tsx
@@ -40,27 +40,27 @@ const ButtonCard = ({
   hasFocus,
   onClick,
   className,
-  onKeyPress,
+  onKeyDown,
   "data-cy": dataCy = "buttonCard",
   ...other
 }: ButtonCardProps) => {
   const tabIndex = disabled ? -1 : 0;
   // mimic native <button> keyboard behavior without using a <button>
-  const keyPressClick = e => {
+  const keyDownClick = e => {
     if (onClick && (e.key === " " || e.key === "Enter")) {
       onClick(e);
     }
   };
-  const handleKeyPress = e => {
-    keyPressClick(e);
-    if (onKeyPress) {
-      onKeyPress(e);
+  const handleKeyDown = e => {
+    keyDownClick(e);
+    if (onKeyDown) {
+      onKeyDown(e);
     }
   };
   const buttonProps = !isInput
     ? {
         tabIndex,
-        onKeyPress: handleKeyPress,
+        onKeyDown: handleKeyDown,
         onClick,
         role: "button",
         "aria-disabled": disabled,
diff --git a/packages/clickable/README.md b/packages/clickable/README.md
index 2ccb1ff3a..973ea678e 100644
--- a/packages/clickable/README.md
+++ b/packages/clickable/README.md
@@ -2,4 +2,4 @@
 
 The Clickable is a higher order presentational component, children get the necessary a11y attributes added.
 
-Use this whenever you want to bind an action on click onto a HTML element. The component will add the appropiate role attribute, add a tabIndex, add a focus state and bind the action to `onClick` and `onKeyPress`. The `onKeyPress` has a wrapping function which filters out eveerything except the space key and enter key events. This prevents that the function gets triggered by accident.
+Use this whenever you want to bind an action on click onto a HTML element. The component will add the appropriate role attribute, add a tabIndex, add a focus state and bind the action to `onClick` and `onKeyDown`. The `onKeyDown` has a wrapping function which filters out everything except the space key and enter key events. This prevents that the function gets triggered by accident.
diff --git a/packages/clickable/components/clickable.tsx b/packages/clickable/components/clickable.tsx
index 49437abae..c4a8d3c3f 100644
--- a/packages/clickable/components/clickable.tsx
+++ b/packages/clickable/components/clickable.tsx
@@ -8,7 +8,7 @@ export interface ClickableProps {
    */
   children: React.ReactElement<HTMLElement> & React.ReactNode;
   /**
-   * Action is a event handler for the onClick and onKeypress events
+   * Action is a event handler for the onClick and onKeyDown events
    */
   action?: (event?: React.SyntheticEvent<HTMLElement>) => void;
   /**
@@ -39,7 +39,7 @@ export const Clickable = ({
 }: ClickableProps) => {
   const { className = "" } = children.props;
 
-  const handleKeyPress = (event: React.KeyboardEvent<HTMLElement>): void => {
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {
     // action can be undefined from components SidebarItem and SidebarSubMenuItem
     if (action && (event.key === " " || event.key === "Enter")) {
       action(event);
@@ -51,7 +51,7 @@ export const Clickable = ({
     className: cx(className, pointer, { [outline]: disableFocusOutline }),
     role,
     tabIndex,
-    onKeyPress: handleKeyPress,
+    onKeyDown: handleKeyDown,
     "data-cy": dataCy
   });
 };
diff --git a/packages/clickable/tests/clickable.test.tsx b/packages/clickable/tests/clickable.test.tsx
index 6630eebda..215ae97cd 100644
--- a/packages/clickable/tests/clickable.test.tsx
+++ b/packages/clickable/tests/clickable.test.tsx
@@ -31,11 +31,11 @@ describe("Clickable", () => {
     expect(action).toHaveBeenCalled();
   });
 
-  it("has onKeyPress function and reacts on space", async () => {
+  it("has onKeyDown function and reacts on space", async () => {
     const action = jest.fn();
     const { getByRole } = render(
       <Clickable action={action}>
-        <span>onKeyPress</span>
+        <span>onKeyDown</span>
       </Clickable>
     );
 
@@ -46,11 +46,11 @@ describe("Clickable", () => {
     expect(action).toHaveBeenCalled();
   });
 
-  it("has onKeyPress function and reacts on Enter", async () => {
+  it("has onKeyDown function and reacts on Enter", async () => {
     const action = jest.fn();
     const { getByRole } = render(
       <Clickable action={action}>
-        <span>onKeyPress</span>
+        <span>onKeyDown</span>
       </Clickable>
     );
 
@@ -60,11 +60,11 @@ describe("Clickable", () => {
     await userEvent.keyboard("[Enter]");
     expect(action).toHaveBeenCalled();
   });
-  it("does not react on e keypress", async () => {
+  it("does not react on e keydown", async () => {
     const action = jest.fn();
     const { getByRole } = render(
       <Clickable action={action}>
-        <span>onKeyPress</span>
+        <span>onKeyDown</span>
       </Clickable>
     );
 
@@ -79,7 +79,7 @@ describe("Clickable", () => {
       const action = jest.fn();
       const { getByRole } = render(
         <Clickable action={action}>
-          <span>onKeyPress</span>
+          <span>onKeyDown</span>
         </Clickable>
       );
 
diff --git a/packages/textInput/components/TextInputWithBadges.tsx b/packages/textInput/components/TextInputWithBadges.tsx
index a530cc716..b3737848f 100644
--- a/packages/textInput/components/TextInputWithBadges.tsx
+++ b/packages/textInput/components/TextInputWithBadges.tsx
@@ -94,14 +94,6 @@ const TextInputWithBadges = (props: TextInputWithBadgesProps) => {
     inputProps.onKeyDown = handleKeyDown;
     inputProps.onKeyUp = handleKeyUp;
     inputProps.onFocus = inputOnFocus;
-    inputProps.onKeyPress = e => {
-      if (props.onKeyPress) {
-        props.onKeyPress(e);
-      }
-      if (e.key === "Enter") {
-        e.preventDefault();
-      }
-    };
     inputProps.onBlur = handleBlur;
     inputProps.type = "text";
     inputProps.ref = inputRef;