use escaper hook for advanced search options

NBISweden · Aug 2, 2022 · f8ed443 · f8ed443
1 parent 9015775
commit f8ed443
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/frontend/src/components/QuickAdd.tsx b/frontend/src/components/QuickAdd.tsx
@@ -1,11 +1,11 @@
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import { IdName, Issue, IssueActivityPair } from "../model";
 import { getApiEndpoint, useDebounce } from "../utils";
 import plus from "../icons/plus.svg";
 import x from "../icons/x.svg";
 import check from "../icons/check.svg";
 import { AuthContext } from "../components/AuthProvider";
-import { PUBLIC_API_URL, headers } from "../utils";
+import { PUBLIC_API_URL, headers, useEscaper } from "../utils";
 import * as ReactDOM from "react-dom";
 
 export const QuickAdd = ({
@@ -183,6 +183,13 @@ export const QuickAdd = ({
     }
   };
 
+  const handleHideAutocomplete = () => {
+    setIsAutoCompleteVisible(false);
+  };
+
+  const wrapperRef = useRef(null);
+  useEscaper(wrapperRef, handleHideAutocomplete);
+
   return (
     <div>
       <h2> Add a new row</h2>
@@ -237,7 +244,7 @@ export const QuickAdd = ({
         </button>
       </div>
       {search.suggestions.length > 0 && isAutoCompleteVisible && (
-        <ul className="col-8 autocomplete-container">
+        <ul className="col-8 autocomplete-container" ref={wrapperRef}>
           {search.suggestions.map((item) => (
             <li key={item.id} className="autocomplete-item">
               <button