fix(Card): prevent keyboard handler form abort (#829)

Co-authored-by: Alexey <[email protected]>

.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)"],

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}
         >

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();

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],
     );