Use references instead of ReactDOM get element

NBISweden · Aug 4, 2022 · 2813c2a · 2813c2a
1 parent d96b52d
commit 2813c2a
Showing 1 changed file with 14 additions and 26 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,49 +187,37 @@ export const QuickAdd = ({
     setIsAutoCompleteVisible(false);
   };
 
-  const wrapperRef = useRef(null);
-  useEscaper(wrapperRef, handleHideAutocomplete);
+  const suggestionsRef = useRef(null);
+  useEscaper(suggestionsRef, handleHideAutocomplete);
+  const issueInputRef = useRef(null);
 
   const handleInputToAutocompleteFocus = (event: any) => {
     event.preventDefault();
     if (event.key == "ArrowUp" || event.key == "ArrowDown") {
-      const suggestionsList = ReactDOM.findDOMNode(
-        document.getElementById("suggestions-ul")
-      );
+      const suggestionsList = suggestionsRef.current;
       let lengthOfSuggestions = suggestionsList.childNodes.length;
       if (lengthOfSuggestions > 0) {
         let suggestionIndex = 0;
-        if (event.key == "ArrowUp") {
-          suggestionIndex = lengthOfSuggestions - 1;
-        } else if (event.key == "ArrowDown") {
-          suggestionIndex = 0;
-        }
-        const suggestion = ReactDOM.findDOMNode(
-          document.getElementById(
-            "suggestion-btn-" + suggestionIndex.toString()
-          )
-        );
-        suggestion.focus();
+        event.key == "ArrowUp" ? lengthOfSuggestions - 1 : 0;
+
+        suggestionsRef.current.childNodes[
+          suggestionIndex
+        ].childNodes[0].focus();
       }
     }
   };
 
   const handleAutocompleteNavigation = (event: any) => {
     event.preventDefault();
     if (event.key == "ArrowUp" || event.key == "ArrowDown") {
-      const suggestionsList = ReactDOM.findDOMNode(
-        document.getElementById("suggestions-ul")
-      );
+      const suggestionsList = suggestionsRef.current;
       let lengthOfSuggestions = suggestionsList.childNodes.length;
       if (lengthOfSuggestions > 0) {
         let sourceIndex: number = Number(event.target.id.split("-")[2]);
         let targetIndex: number =
           event.key == "ArrowUp" ? sourceIndex - 1 : sourceIndex + 1;
         if (targetIndex >= 0 && targetIndex < lengthOfSuggestions) {
-          const suggestion = ReactDOM.findDOMNode(
-            document.getElementById("suggestion-btn-" + targetIndex.toString())
-          );
-          suggestion.focus();
+          suggestionsRef.current.childNodes[targetIndex].childNodes[0].focus();
         }
       }
     }
@@ -250,6 +237,7 @@ export const QuickAdd = ({
       <div className="row">
         <input
           id="input-issue"
+          ref={issueInputRef}
           autoComplete="off"
           className={getSearchClasses()}
           type="text"
@@ -295,7 +283,7 @@ export const QuickAdd = ({
         <ul
           id="suggestions-ul"
           className="col-8 autocomplete-container"
-          ref={wrapperRef}
+          ref={suggestionsRef}
         >
           {search.suggestions.map((item, index) => (
             <li key={item.id} className="autocomplete-item">