feat: added support for Alt+Down Arrow and Alt+Up Arrow in ComboB…

…ox (#14892) * feat: added support * feat: added test * fix: tests
carbon-design-system · Nov 27, 2023 · 128836e · 128836e
1 parent ffaf3e8
commit 128836e
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 0 deletions.
diff --git a/packages/react/src/components/ComboBox/ComboBox-test.js b/packages/react/src/components/ComboBox/ComboBox-test.js
@@ -16,6 +16,7 @@ import {
   generateGenericItem,
 } from '../ListBox/test-helpers';
 import ComboBox from '../ComboBox';
+import { act } from 'react-dom/test-utils';
 
 const findInputNode = () => screen.getByRole('combobox');
 const openMenu = async () => {
@@ -249,5 +250,20 @@ describe('ComboBox', () => {
       expect(firstListBox()).toBeEmptyDOMElement();
       expect(secondListBox()).toBeEmptyDOMElement();
     });
+    it('should open menu without moving focus on pressing Alt+ DownArrow', async () => {
+      render(<ComboBox {...mockProps} />);
+      act(() => {
+        screen.getByRole('combobox').focus();
+      });
+      await userEvent.keyboard('{Alt>}{ArrowDown}');
+      assertMenuOpen(mockProps);
+    });
+
+    it('should close menu and return focus to combobox on pressing Alt+ UpArrow', async () => {
+      render(<ComboBox {...mockProps} />);
+      await openMenu();
+      await userEvent.keyboard('{Alt>}{ArrowUp}');
+      assertMenuClosed(mockProps);
+    });
   });
 });
diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -635,6 +635,19 @@ const ComboBox = forwardRef(
                   event.target.value.length
                 );
               }
+
+              if (event.altKey && event.key == 'ArrowDown') {
+                event.preventDownshiftDefault = true;
+                if (!isOpen) {
+                  toggleMenu();
+                }
+              }
+              if (event.altKey && event.key == 'ArrowUp') {
+                event.preventDownshiftDefault = true;
+                if (isOpen) {
+                  toggleMenu();
+                }
+              }
             },
           });