fix: Add type-ahead to assign tester dropdown (#1095)

Address #991
w3c · May 20, 2024 · b6a5f54 · b6a5f54
1 parent a062f63
commit b6a5f54
Showing 1 changed file with 25 additions and 1 deletion.
diff --git a/client/components/TestQueue/AssignTesterDropdown/index.jsx b/client/components/TestQueue/AssignTesterDropdown/index.jsx
@@ -110,9 +110,33 @@ const AssignTesterDropdown = ({
     const clearAriaLiveRegion = () => {
         setAlertMessage('');
     };
+
+    const handleKeyDown = event => {
+        const { key } = event;
+        if (key.match(/[0-9a-zA-Z]/)) {
+            const container = event.target.closest('[role=menu]');
+            const matchingMenuItem = Array.from(container.children).find(
+                menuItem => {
+                    return menuItem.innerText
+                        .trim()
+                        .toLowerCase()
+                        .startsWith(key.toLowerCase());
+                }
+            );
+
+            if (matchingMenuItem) {
+                matchingMenuItem.focus();
+            }
+        }
+    };
+
     return (
         <LoadingStatus message={loadingMessage}>
-            <Dropdown focusFirstItemOnShow aria-label="Assign testers menu">
+            <Dropdown
+                focusFirstItemOnShow
+                aria-label="Assign testers menu"
+                onKeyDown={handleKeyDown}
+            >
                 <Dropdown.Toggle
                     ref={dropdownAssignTesterButtonRef}
                     aria-label="Assign testers"