search dropdown click #3307

graphql · Jul 23, 2023 · 582edc8 · 582edc8
1 parent 1dd51f1
commit 582edc8
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/packages/graphiql-react/src/explorer/components/search.tsx b/packages/graphiql-react/src/explorer/components/search.tsx
@@ -70,9 +70,12 @@ export function Search() {
     [push],
   );
   const [isFocused, setIsFocused] = useState(false);
-  const handleFocus: FocusEventHandler = useCallback(e => {
-    setIsFocused(e.type === 'focus');
-  }, []);
+  const handleFocus: FocusEventHandler = useCallback(
+    e => {
+      setIsFocused(e.type === 'focus');
+    },
+    [setIsFocused],
+  );
 
   const shouldSearchBoxAppear =
     explorerNavStack.length === 1 ||
@@ -101,7 +104,8 @@ export function Search() {
         <Combobox.Input
           autoComplete="off"
           onFocus={handleFocus}
-          onBlur={handleFocus}
+          // TODO: find a better way to handle onBlur
+          // onBlur={handleFocus}
           onChange={event => setSearchValue(event.target.value)}
           placeholder="&#x2318; K"
           ref={inputRef}
@@ -110,7 +114,7 @@ export function Search() {
         />
       </div>
 
-      {/* hide on blur */}
+      {/* display on focus */}
       {isFocused && (
         <Combobox.Options data-cy="doc-explorer-list">
           {results.within.length +