fix handling onBlur by using ref instead of state

graphql · Jul 24, 2023 · 58e657a · 58e657a
1 parent d5c4cd2
commit 58e657a
Showing 1 changed file with 6 additions and 9 deletions.
diff --git a/packages/graphiql-react/src/explorer/components/search.tsx b/packages/graphiql-react/src/explorer/components/search.tsx
@@ -69,13 +69,10 @@ export function Search() {
     },
     [push],
   );
-  const [isFocused, setIsFocused] = useState(false);
-  const handleFocus: FocusEventHandler = useCallback(
-    e => {
-      setIsFocused(e.type === 'focus');
-    },
-    [setIsFocused],
-  );
+  const isFocused = useRef(false);
+  const handleFocus: FocusEventHandler = useCallback(e => {
+    isFocused.current = e.type === 'focus';
+  }, []);
 
   const shouldSearchBoxAppear =
     explorerNavStack.length === 1 ||
@@ -105,7 +102,7 @@ export function Search() {
           autoComplete="off"
           onFocus={handleFocus}
           // TODO: find a better way to handle onBlur
-          // onBlur={handleFocus}
+          onBlur={handleFocus}
           onChange={event => setSearchValue(event.target.value)}
           placeholder="&#x2318; K"
           ref={inputRef}
@@ -115,7 +112,7 @@ export function Search() {
       </div>
 
       {/* display on focus */}
-      {isFocused && (
+      {isFocused.current && (
         <Combobox.Options data-cy="doc-explorer-list">
           {results.within.length +
             results.types.length +