From 0ba5d29a0d6665861c0c84001bae5810967c177e Mon Sep 17 00:00:00 2001
From: MihirGH <hashmihir@gmail.com>
Date: Fri, 28 Oct 2022 22:09:21 +0530
Subject: [PATCH] fix: remove blur event listener from tippy element (#3365)

---
 .../extension-bubble-menu/src/bubble-menu-plugin.ts   | 11 ++++++++---
 .../src/floating-menu-plugin.ts                       | 11 ++++++++---
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/extension-bubble-menu/src/bubble-menu-plugin.ts b/packages/extension-bubble-menu/src/bubble-menu-plugin.ts
index d03fdea4e0e..8f8b409a404 100644
--- a/packages/extension-bubble-menu/src/bubble-menu-plugin.ts
+++ b/packages/extension-bubble-menu/src/bubble-menu-plugin.ts
@@ -129,6 +129,10 @@ export class BubbleMenuView {
     this.hide()
   }
 
+  tippyBlurHandler = (event : FocusEvent) => {
+    this.blurHandler({ event })
+  }
+
   createTooltip() {
     const { element: editorElement } = this.editor.options
     const editorIsAttached = !!editorElement.parentElement
@@ -150,9 +154,7 @@ export class BubbleMenuView {
 
     // maybe we have to hide tippy on its own blur event as well
     if (this.tippy.popper.firstChild) {
-      (this.tippy.popper.firstChild as HTMLElement).addEventListener('blur', event => {
-        this.blurHandler({ event })
-      })
+      (this.tippy.popper.firstChild as HTMLElement).addEventListener('blur', this.tippyBlurHandler)
     }
   }
 
@@ -213,6 +215,9 @@ export class BubbleMenuView {
   }
 
   destroy() {
+    if (this.tippy?.popper.firstChild) {
+      (this.tippy.popper.firstChild as HTMLElement).removeEventListener('blur', this.tippyBlurHandler)
+    }
     this.tippy?.destroy()
     this.element.removeEventListener('mousedown', this.mousedownHandler, { capture: true })
     this.view.dom.removeEventListener('dragstart', this.dragstartHandler)
diff --git a/packages/extension-floating-menu/src/floating-menu-plugin.ts b/packages/extension-floating-menu/src/floating-menu-plugin.ts
index f5416d33695..6f4f6e2bccf 100644
--- a/packages/extension-floating-menu/src/floating-menu-plugin.ts
+++ b/packages/extension-floating-menu/src/floating-menu-plugin.ts
@@ -104,6 +104,10 @@ export class FloatingMenuView {
     this.hide()
   }
 
+  tippyBlurHandler = (event : FocusEvent) => {
+    this.blurHandler({ event })
+  }
+
   createTooltip() {
     const { element: editorElement } = this.editor.options
     const editorIsAttached = !!editorElement.parentElement
@@ -125,9 +129,7 @@ export class FloatingMenuView {
 
     // maybe we have to hide tippy on its own blur event as well
     if (this.tippy.popper.firstChild) {
-      (this.tippy.popper.firstChild as HTMLElement).addEventListener('blur', event => {
-        this.blurHandler({ event })
-      })
+      (this.tippy.popper.firstChild as HTMLElement).addEventListener('blur', this.tippyBlurHandler)
     }
   }
 
@@ -172,6 +174,9 @@ export class FloatingMenuView {
   }
 
   destroy() {
+    if (this.tippy?.popper.firstChild) {
+      (this.tippy.popper.firstChild as HTMLElement).removeEventListener('blur', this.tippyBlurHandler)
+    }
     this.tippy?.destroy()
     this.element.removeEventListener('mousedown', this.mousedownHandler, { capture: true })
     this.editor.off('focus', this.focusHandler)