Merge pull request #542 from NBISweden/dev/focus-arrow

Rework search suggestions navigation
NBISweden · Aug 4, 2022 · cc48718 · cc48718
2 parents 8be417d + 8b04f80
commit cc48718
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 6 deletions.
diff --git a/frontend/src/components/QuickAdd.tsx b/frontend/src/components/QuickAdd.tsx
@@ -6,7 +6,6 @@ import x from "../icons/x.svg";
 import check from "../icons/check.svg";
 import { AuthContext } from "../components/AuthProvider";
 import { PUBLIC_API_URL, headers, useEscaper } from "../utils";
-import * as ReactDOM from "react-dom";
 
 export const QuickAdd = ({
   addIssueActivity,
@@ -101,7 +100,7 @@ export const QuickAdd = ({
   const suggestionSelected = (selection: Issue) => {
     setIssue(selection);
     // Update input box with selected issue
-    let element = ReactDOM.findDOMNode(document.getElementById("input-issue"));
+    let element = issueInputRef.current;
     element.value = selection.id.toString();
     setIsAutoCompleteVisible(false);
   };
@@ -188,8 +187,43 @@ export const QuickAdd = ({
     setIsAutoCompleteVisible(false);
   };
 
-  const wrapperRef = useRef(null);
-  useEscaper(wrapperRef, handleHideAutocomplete);
+  const getSuggestionsLength = () => {
+    return suggestionsRef.current.childNodes.length;
+  };
+
+  const suggestionsRef = useRef(null);
+  useEscaper(suggestionsRef, handleHideAutocomplete);
+  const issueInputRef = useRef(null);
+
+  const handleInputToAutocompleteFocus = (event: any) => {
+    event.preventDefault();
+    if (event.key == "ArrowUp" || event.key == "ArrowDown") {
+      let sugLen = getSuggestionsLength();
+      if (sugLen > 0) {
+        let suggestionIndex = 0;
+        event.key == "ArrowUp" ? sugLen - 1 : 0;
+
+        suggestionsRef.current.childNodes[
+          suggestionIndex
+        ].childNodes[0].focus();
+      }
+    }
+  };
+
+  const handleAutocompleteNavigation = (event: any) => {
+    event.preventDefault();
+    if (event.key == "ArrowUp" || event.key == "ArrowDown") {
+      let sugLen = getSuggestionsLength();
+      if (sugLen > 0) {
+        let sourceIndex: number = Number(event.target.id.split("-")[2]);
+        let targetIndex: number =
+          event.key == "ArrowUp" ? sourceIndex - 1 : sourceIndex + 1;
+        if (targetIndex >= 0 && targetIndex < sugLen) {
+          suggestionsRef.current.childNodes[targetIndex].childNodes[0].focus();
+        }
+      }
+    }
+  };
 
   return (
     <div>
@@ -205,9 +239,13 @@ export const QuickAdd = ({
       <div className="row">
         <input
           id="input-issue"
+          ref={issueInputRef}
           autoComplete="off"
           className={getSearchClasses()}
           type="text"
+          onKeyUp={(ev) => {
+            handleInputToAutocompleteFocus(ev);
+          }}
           min={0}
           onChange={(e) => {
             setSearch({ ...search, text: e.target.value });
@@ -244,10 +282,18 @@ export const QuickAdd = ({
         </button>
       </div>
       {search.suggestions.length > 0 && isAutoCompleteVisible && (
-        <ul className="col-8 autocomplete-container" ref={wrapperRef}>
-          {search.suggestions.map((item) => (
+        <ul
+          id="suggestions-ul"
+          className="col-8 autocomplete-container"
+          ref={suggestionsRef}
+        >
+          {search.suggestions.map((item, index) => (
             <li key={item.id} className="autocomplete-item">
               <button
+                id={"suggestion-btn-" + index.toString()}
+                onKeyUp={(ev) => {
+                  handleAutocompleteNavigation(ev);
+                }}
                 key={item.id}
                 onClick={() => suggestionSelected(item)}
                 className="autocomplete-button"

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -497,6 +497,11 @@ Other button classes are defined further down together with other classes for th
   padding: 0.5rem 1rem;
 }
 
+.autocomplete-button:focus {
+  background-color: hsl(186deg 30% 86%);
+  outline: none;
+}
+
 .autocomplete-button:hover {
   background-color: hsl(186deg 30% 94%);
   outline: none;