fix: hide tooltip when anchor is removed from DOM

Author: gabrieljablonski

src/components/Tooltip/Tooltip.tsx

@@ -263,6 +263,29 @@ const Tooltip = ({
       })
     })
 
+    const anchorElement = anchorById ?? activeAnchor.current
+
+    const parentObserverCallback: MutationCallback = (mutationList) => {
+      if (!anchorElement) {
+        return
+      }
+      mutationList.forEach((mutation) => {
+        if (mutation.type !== 'childList') {
+          return
+        }
+        mutation.removedNodes.forEach((node) => {
+          if (node.contains(anchorElement)) {
+            handleShow(false)
+          }
+        })
+      })
+    }
+
+    const parentObserver = new MutationObserver(parentObserverCallback)
+
+    // watch for anchor being removed from the DOM
+    parentObserver.observe(document.body, { attributes: false, childList: true, subtree: true })
+
     return () => {
       if (events.find((event: string) => event === 'click')) {
         window.removeEventListener('click', handleClickOutsideAnchor)
@@ -279,6 +302,7 @@ const Tooltip = ({
           ref.current?.removeEventListener(event, listener)
         })
       })
+      parentObserver.disconnect()
     }
   }, [anchorRefs, activeAnchor, closeOnEsc, anchorId, events, delayHide, delayShow])