Replaced DOMNodeRemoved event by MutationObserver

Author: Oscar Gotting

packages/graphql-playground-react/src/components/Playground/GraphQLEditor.tsx

@@ -425,14 +425,18 @@ class GraphQLEditor extends React.PureComponent<Props & ReduxProps> {
   private handleHintInformationRender = elem => {
     elem.addEventListener('click', this.onClickHintInformation)
 
-    let onRemoveFn
-    elem.addEventListener(
-      'DOMNodeRemoved',
-      (onRemoveFn = () => {
-        elem.removeEventListener('DOMNodeRemoved', onRemoveFn)
-        elem.removeEventListener('click', this.onClickHintInformation)
-      }),
-    )
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.removedNodes.forEach((removedNode) => {
+          if (removedNode === elem) {
+            elem.removeEventListener('click', this.onClickHintInformation);
+            observer.disconnect();
+          }
+        });
+      });
+    });
+
+    observer.observe(elem, { childList: true });
   }
 
   private handleResizeStart = downEvent => {

packages/graphql-playground-react/src/components/Playground/onHasCompletion.tsx

@@ -87,19 +87,20 @@ export default function onHasCompletion(cm, data, onHintInformationRender) {
       // When CodeMirror attempts to remove the hint UI, we detect that it was
       // 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((mutations) => {
+        mutations.forEach((mutation) => {
+          mutation.removedNodes.forEach((removedNode) => {
+            if (removedNode === hintsUl) {
+              wrapper.parentNode.removeChild(wrapper);
+              wrapper = null;
+              information = null;
+              observer.disconnect();
+            }
+          });
+        });
+      });
+
+      observer.observe(wrapper, { childList: true });
     }
 
     // Now that the UI has been set up, add info to information.