fix search dropdown click (#3364)

* fix handling onBlur by using ref instead of state
graphql · Jul 24, 2023 · d67c13f · d67c13f
1 parent 4cbdf18
commit d67c13f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/.changeset/lemon-snakes-exist.md b/.changeset/lemon-snakes-exist.md
@@ -0,0 +1,6 @@
+---
+'graphiql': patch
+'@graphiql/react': patch
+---
+
+Fix search result bug on select, #33307
diff --git a/packages/graphiql-react/src/explorer/components/search.tsx b/packages/graphiql-react/src/explorer/components/search.tsx
@@ -69,9 +69,9 @@ export function Search() {
     },
     [push],
   );
-  const [isFocused, setIsFocused] = useState(false);
+  const isFocused = useRef(false);
   const handleFocus: FocusEventHandler = useCallback(e => {
-    setIsFocused(e.type === 'focus');
+    isFocused.current = e.type === 'focus';
   }, []);
 
   const shouldSearchBoxAppear =
@@ -110,8 +110,8 @@ export function Search() {
         />
       </div>
 
-      {/* hide on blur */}
-      {isFocused && (
+      {/* display on focus */}
+      {isFocused.current && (
         <Combobox.Options data-cy="doc-explorer-list">
           {results.within.length +
             results.types.length +

diff --git a/packages/graphiql/cypress/e2e/docs.cy.ts b/packages/graphiql/cypress/e2e/docs.cy.ts
@@ -46,6 +46,8 @@ describe('GraphiQL DocExplorer - search', () => {
   });
 
   it('Closes popover when blurring input', () => {
+    cy.dataCy('doc-explorer-input').focus();
+    cy.dataCy('doc-explorer-input').type('list');
     cy.dataCy('doc-explorer-input').blur();
     cy.dataCy('doc-explorer-list').should('not.exist');
   });