fix: search input focus issue (#825)

near · Jun 4, 2024 · d8ef0aa · d8ef0aa
1 parent d089c7f
commit d8ef0aa
Showing 1 changed file with 8 additions and 6 deletions.
diff --git a/src/Navigation/Search.jsx b/src/Navigation/Search.jsx
@@ -13,19 +13,21 @@ const handleInteractOutside = (e) => {
 };
 
 return (
-  <Popover.Root open={showTypeAheadDropdown}>
-    <Popover.Trigger asChild>
+  <HoverCard.Root openDelay={200} closeDelay={300} open={showTypeAheadDropdown}>
+    <HoverCard.Trigger asChild>
       <div>
         <Widget
           src="${REPL_ACCOUNT}/widget/DIG.InputSearch"
           props={{
             onQueryChange: handleOnInput,
             placeholder: "Search NEAR",
+            onBlur: () => setIsFocused(false),
+            onFocus: () => setIsFocused(true),
           }}
         />
       </div>
-    </Popover.Trigger>
-    <Popover.Content asChild onInteractOutside={handleInteractOutside} onOpenAutoFocus={() => {}}>
+    </HoverCard.Trigger>
+    <HoverCard.Content asChild side="bottom" sideOffset={10} hideWhenDetached={true}>
       <div>
         <Widget
           src="${REPL_ACCOUNT}/widget/Search.TypeAheadDropdown"
@@ -35,6 +37,6 @@ return (
           }}
         />
       </div>
-    </Popover.Content>
-  </Popover.Root>
+    </HoverCard.Content>
+  </HoverCard.Root>
 );