fix: search click event (#827)

near · Jun 6, 2024 · 018ea0a · 018ea0a
1 parent d8ef0aa
commit 018ea0a
Showing 1 changed file with 14 additions and 5 deletions.
diff --git a/src/Navigation/Search.jsx b/src/Navigation/Search.jsx
@@ -1,5 +1,6 @@
 const [value, setValue] = useState("");
 const [isFocused, setIsFocused] = useState(false);
+const [isCursorOutside, setIsCursorOutside] = useState(false);
 
 const showTypeAheadDropdown = isFocused && !!value;
 
@@ -8,21 +9,29 @@ const handleOnInput = (value) => {
   setIsFocused(!!value);
 };
 
-const handleInteractOutside = (e) => {
-  setIsFocused(false);
+const handleInteractOutside = (value) => {
+  setIsCursorOutside(!value);
+};
+
+const handleFocusChange = () => {
+  setIsFocused(!isFocused);
+};
+
+const handleOnBlur = () => {
+  setIsFocused(!isCursorOutside);
 };
 
 return (
-  <HoverCard.Root openDelay={200} closeDelay={300} open={showTypeAheadDropdown}>
+  <HoverCard.Root openDelay={200} closeDelay={300} open={showTypeAheadDropdown} onOpenChange={handleInteractOutside}>
     <HoverCard.Trigger asChild>
       <div>
         <Widget
           src="${REPL_ACCOUNT}/widget/DIG.InputSearch"
           props={{
             onQueryChange: handleOnInput,
             placeholder: "Search NEAR",
-            onBlur: () => setIsFocused(false),
-            onFocus: () => setIsFocused(true),
+            onBlur: handleOnBlur,
+            onFocus: handleFocusChange,
           }}
         />
       </div>