fix(Select): update keyboard interaction to correspond with specifica…

…tion (#1176)
gravity-ui · Nov 30, 2023 · 504b05c · 504b05c
1 parent e1ce48f
commit 504b05c
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 0 deletions.
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -156,6 +156,10 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
                     handleOptionClick(getActiveItem(listRef));
                 }
             }
+            if ([KeyCode.ARROW_DOWN, KeyCode.ARROW_UP].includes(e.key) && !open) {
+                e.preventDefault();
+                toggleOpen();
+            }
 
             listRef?.current?.onKeyDown(e);
         },

diff --git a/src/components/Select/__tests__/Select.base-actions.test.tsx b/src/components/Select/__tests__/Select.base-actions.test.tsx
@@ -52,6 +52,22 @@ describe('Select base actions', () => {
             await user.keyboard('[Space]');
             getByTestId(SelectQa.POPUP);
         });
+
+        test('ArrowUp', async () => {
+            const {getByTestId} = setup();
+            const user = userEvent.setup();
+            await user.keyboard('[Tab]');
+            await user.keyboard('[ArrowUp]');
+            getByTestId(SelectQa.POPUP);
+        });
+
+        test('ArrowDown', async () => {
+            const {getByTestId} = setup();
+            const user = userEvent.setup();
+            await user.keyboard('[Tab]');
+            await user.keyboard('[ArrowDown]');
+            getByTestId(SelectQa.POPUP);
+        });
     });
 
     describe('initial state', () => {

diff --git a/src/constants.ts b/src/constants.ts
@@ -6,4 +6,6 @@ export const KeyCode = {
     SPACEBAR: ' ',
     SPACEBAR_OLD: 'Spacebar',
     ESCAPE: 'Escape',
+    ARROW_UP: 'ArrowUp',
+    ARROW_DOWN: 'ArrowDown',
 };