Dev/search click escape

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 = ({
@@ -175,14 +175,13 @@ export const QuickAdd = ({
     return src;
   };
 
-  const onEscapeInput = (e: any) => {
-    {
-      if (e.key === "Escape") {
-        setIsAutoCompleteVisible(false);
-      }
-    }
+  const handleHideAutocomplete = () => {
+    setIsAutoCompleteVisible(false);
   };
 
+  const wrapperRef = useRef(null);
+  useEscaper(wrapperRef, handleHideAutocomplete);
+
   return (
     <div>
       <h2> Add a new row</h2>
@@ -201,7 +200,6 @@ export const QuickAdd = ({
           className={getSearchClasses()}
           type="text"
           min={0}
-          onKeyUp={(e) => onEscapeInput(e)}
           onChange={(e) => {
             setSearch({ ...search, text: e.target.value });
             setIssue(null);
@@ -237,7 +235,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

frontend/src/utils.tsx

@@ -1,5 +1,10 @@
 import.meta.hot;
-import React, { useState } from "react";
+import React, {
+  useState,
+  useEffect,
+  ElementType,
+  MouseEventHandler,
+} from "react";
 export const PUBLIC_API_URL = process.env.PUBLIC_API_URL;
 export const PUBLIC_REDMINE_URL = process.env.PUBLIC_REDMINE_URL;
 
@@ -132,3 +137,34 @@ export const useViewport = () => {
   // Return the width so we can use it in our components
   return { width };
 };
+
+// Hook to escape a certain DOM element by clicking outside of it or pressing Escape
+export const useEscaper = (
+  ref: React.RefObject<HTMLElement>,
+  callback: () => void
+) => {
+  useEffect(() => {
+    // What should happen when clicked outside the element
+    const handleClickOutside = (event: any) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        callback();
+      }
+    };
+
+    // What should happen when pressed escape
+    const handleEscape = (event: any) => {
+      if (event.key == "Escape") {
+        callback();
+      }
+    };
+
+    // Bind the event listeners
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      // Unbind the event listeners on clean up
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [ref]);
+};