From e45c9025a849e050caaf9717dd346149bbf1b298 Mon Sep 17 00:00:00 2001
From: "Mr.Dr.Professor Patrick" <alaev89@yandex-team.ru>
Date: Wed, 19 Jul 2023 15:10:43 +0200
Subject: [PATCH] fix(Card): prevent keyboard handler form abort (#829)

Co-authored-by: Alexey <sudilovskiy@yandex-team.ru>
---
 .eslintrc                                   |  5 ++++-
 src/components/Card/Card.tsx                |  4 ++--
 src/components/Card/__tests__/Card.test.tsx | 16 ++++++++++++++++
 src/components/utils/useActionHandlers.ts   |  8 ++------
 4 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 00c5a8ed9d..103ffb8fa6 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -27,7 +27,10 @@
                 "node": true,
                 "jest": true
             },
-            "extends": ["plugin:testing-library/react"]
+            "extends": ["plugin:testing-library/react"],
+            "rules": {
+                "jsx-a11y/no-static-element-interactions": 0
+            }
         },
         {
             "files": ["**/__stories__/**/*.[jt]s?(x)"],
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index 9def9049e4..eca35a4008 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -65,7 +65,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(pr
     const defaultView = isTypeContainer || isTypeSelection ? 'outlined' : undefined;
 
     const handleClick = isClickable ? onClick : undefined;
-    const {onKeyDown} = useActionHandlers(handleClick);
+    const {onKeyDown} = useActionHandlers(onClick);
 
     return (
         <div
@@ -85,7 +85,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(pr
                 className,
             )}
             onClick={handleClick}
-            onKeyDown={onKeyDown}
+            onKeyDown={isClickable ? onKeyDown : undefined}
             tabIndex={isClickable ? 0 : undefined}
             data-qa={qa}
         >
diff --git a/src/components/Card/__tests__/Card.test.tsx b/src/components/Card/__tests__/Card.test.tsx
index c32fd4cd74..83352bb3e9 100644
--- a/src/components/Card/__tests__/Card.test.tsx
+++ b/src/components/Card/__tests__/Card.test.tsx
@@ -222,6 +222,22 @@ describe('Card', () => {
         expect(handleOnClick).toHaveBeenCalledTimes(0);
     });
 
+    test('should not prevent keyboard events without handler', async () => {
+        render(
+            <Card>
+                <label>
+                    Foobar <input />
+                </label>
+            </Card>,
+        );
+
+        const input = screen.getByLabelText('Foobar');
+
+        await userEvent.type(input, 'Test text with spaces');
+
+        expect(input).toHaveValue('Test text with spaces');
+    });
+
     describe('should respond to clicks correctly', () => {
         test('reacts to keystrokes if focused', async () => {
             const user = userEvent.setup();
diff --git a/src/components/utils/useActionHandlers.ts b/src/components/utils/useActionHandlers.ts
index 5a0fbdd24a..62173e3dad 100644
--- a/src/components/utils/useActionHandlers.ts
+++ b/src/components/utils/useActionHandlers.ts
@@ -15,13 +15,9 @@ interface UseActionHandlersResult<T> {
 export function useActionHandlers<T>(callback?: AnyFunction): UseActionHandlersResult<T> {
     const onKeyDown = React.useCallback(
         (event: React.KeyboardEvent<T>) => {
-            if (['Enter', ' ', 'Spacebar'].includes(event.key)) {
-                event.preventDefault();
-
-                return callback?.(event);
+            if (callback && ['Enter', ' ', 'Spacebar'].includes(event.key)) {
+                callback(event);
             }
-
-            return undefined;
         },
         [callback],
     );