From d67c13f6e1f478b171801afd0767b98312db04c9 Mon Sep 17 00:00:00 2001
From: Rikki Schulte <rikki.schulte@gmail.com>
Date: Mon, 24 Jul 2023 17:40:45 +0200
Subject: [PATCH] fix search dropdown click (#3364)

* fix handling onBlur by using ref instead of state
---
 .changeset/lemon-snakes-exist.md                          | 6 ++++++
 .../graphiql-react/src/explorer/components/search.tsx     | 8 ++++----
 packages/graphiql/cypress/e2e/docs.cy.ts                  | 2 ++
 3 files changed, 12 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/lemon-snakes-exist.md

diff --git a/.changeset/lemon-snakes-exist.md b/.changeset/lemon-snakes-exist.md
new file mode 100644
index 00000000000..28e2b192e52
--- /dev/null
+++ 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
index 7affdeca08a..6faed70f652 100644
--- 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
index ba83e95de8c..6a6278b23cc 100644
--- 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');
   });