From 034f5c5ea1d6c6460a6c7f0927fb0f28b30cf1c2 Mon Sep 17 00:00:00 2001
From: Olorunnishola Olamilekan <olorunnisholaolamilekan@gmail.com>
Date: Tue, 26 Nov 2024 06:31:56 +0100
Subject: [PATCH 1/2] fix: close hintUl on unfocus

---
 src/components/marked/mini-graphiQL.tsx | 33 ++++++++++++++++---------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/components/marked/mini-graphiQL.tsx b/src/components/marked/mini-graphiQL.tsx
index efc36dbcc4..6171f6018c 100644
--- a/src/components/marked/mini-graphiQL.tsx
+++ b/src/components/marked/mini-graphiQL.tsx
@@ -166,7 +166,7 @@ class QueryEditor extends Component {
       },
       hintOptions: {
         schema: this.props.schema,
-        closeOnUnfocus: false,
+        closeOnUnfocus: true,
         completeSingle: false,
       },
       extraKeys: {
@@ -529,18 +529,27 @@ function onHasCompletion(cm, data, onHintInformationRender) {
       // removed from our wrapper and in turn remove the wrapper from the
       // original container.
       let onRemoveFn
-      wrapper.addEventListener(
-        "DOMNodeRemoved",
-        (onRemoveFn = event => {
-          if (event.target === hintsUl) {
-            wrapper.removeEventListener("DOMNodeRemoved", onRemoveFn)
-            wrapper.parentNode.removeChild(wrapper)
-            wrapper = null
-            information = null
-            onRemoveFn = null
+      const observer = new MutationObserver((mutationsList) => {
+        for (const mutation of mutationsList) {
+          // Check if the hintsUl element was removed
+          if (mutation.removedNodes) {
+            mutation.removedNodes.forEach((node) => {
+              if (node === hintsUl) {                
+                // Cleanup logic
+                observer.disconnect(); // Stop observing
+                wrapper.parentNode.removeChild(wrapper);
+                wrapper = null;
+                information = null;
+                onRemoveFn = null;
+              }
+            });
           }
-        }),
-      )
+        }
+      });
+      
+      // Start observing the wrapper for child node removals
+      observer.observe(wrapper, { childList: true, subtree: false });
+      
     }
 
     // Now that the UI has been set up, add info to information.

From b8e76aa94dad3639479ed77207d06769723a131a Mon Sep 17 00:00:00 2001
From: Olorunnishola Olamilekan <olorunnisholaolamilekan@gmail.com>
Date: Tue, 26 Nov 2024 20:51:08 +0100
Subject: [PATCH 2/2] fix: prettier code style errors

---
 src/components/marked/mini-graphiQL.tsx | 25 ++++++++++++-------------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/components/marked/mini-graphiQL.tsx b/src/components/marked/mini-graphiQL.tsx
index 6171f6018c..1ed44a30d1 100644
--- a/src/components/marked/mini-graphiQL.tsx
+++ b/src/components/marked/mini-graphiQL.tsx
@@ -529,27 +529,26 @@ function onHasCompletion(cm, data, onHintInformationRender) {
       // removed from our wrapper and in turn remove the wrapper from the
       // original container.
       let onRemoveFn
-      const observer = new MutationObserver((mutationsList) => {
+      const observer = new MutationObserver(mutationsList => {
         for (const mutation of mutationsList) {
           // Check if the hintsUl element was removed
           if (mutation.removedNodes) {
-            mutation.removedNodes.forEach((node) => {
-              if (node === hintsUl) {                
+            mutation.removedNodes.forEach(node => {
+              if (node === hintsUl) {
                 // Cleanup logic
-                observer.disconnect(); // Stop observing
-                wrapper.parentNode.removeChild(wrapper);
-                wrapper = null;
-                information = null;
-                onRemoveFn = null;
+                observer.disconnect() // Stop observing
+                wrapper.parentNode.removeChild(wrapper)
+                wrapper = null
+                information = null
+                onRemoveFn = null
               }
-            });
+            })
           }
         }
-      });
-      
+      })
+
       // Start observing the wrapper for child node removals
-      observer.observe(wrapper, { childList: true, subtree: false });
-      
+      observer.observe(wrapper, { childList: true, subtree: false })
     }
 
     // Now that the UI has been set up, add info to information.