CMS-582: Update onKeyDown event on advisory event typeahead search (#…

…1553)
bcgov · Dec 17, 2024 · a5b6081 · a5b6081
1 parent 85fd1b4
commit a5b6081
Showing 1 changed file with 26 additions and 3 deletions.
diff --git a/src/gatsby/src/components/advisories/advisoryFilter.js b/src/gatsby/src/components/advisories/advisoryFilter.js
@@ -92,10 +92,33 @@ const AdvisoryFilter = ({
     updateAdvisoriesSearchText("")
   }
   const handleKeyDownInput = (e) => {
-    if (e.key === 'Enter') {
-      if (!hasResult(eventText)) {
-        setIsDropdownOpen(false)
+    const optionsLength = typeaheadRef.current.items.length
+    let activeIndex = typeaheadRef.current.state.activeIndex
+    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+      e.preventDefault()
+      if (e.key === 'ArrowUp') {
+        activeIndex = activeIndex - 1
+      } else if (e.key === 'ArrowDown') {
+        activeIndex = activeIndex + 1
+      }
+      if (activeIndex > optionsLength) {
+        activeIndex = -1 // go to the text input
+      }
+      if (activeIndex < -1) {
+        activeIndex = optionsLength - 1 // go to the last item
+      }
+      typeaheadRef.current.setState({ activeIndex })
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      const activeOption = typeaheadRef.current.items[activeIndex]
+      if (activeOption !== undefined) {
+        handleTypeaheadChange([activeOption])
+      } else {
+        handleSearch()
       }
+      setIsDropdownOpen(false)
+    } else if (e.key === 'Tab') {
+      setIsDropdownOpen(false)
     }
   }