Repository: gravity-ui/uikit (ts)

Issue:
Preventing of any events with no reason from Card children 
it seems like this line should be fired conditionally:
https://github.com/gravity-ui/uikit/pull/771/files#diff-0dd621c2c92f4f42ea8884560f43696fd4e03204717f28a1a144aeb249de808dR19

because right now it intercept and prevent any propagated event from Card children 

Pull request:
fix(Card): prevent keyboard handler form abort
Fixes #822 

Patch:
diff --git a/.eslintrc b/.eslintrc
index 00c5a8ed..103ffb8f 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 9def9049..eca35a40 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/utils/useActionHandlers.ts b/src/components/utils/useActionHandlers.ts
index 5a0fbdd2..62173e3d 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],
     );


Test patch:
diff --git a/src/components/Card/__tests__/Card.test.tsx b/src/components/Card/__tests__/Card.test.tsx
index c32fd4cd..83352bb3 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();