fix: remove blur event listener from tippy element (#3365) (#3366)

ueberdosis · Nov 4, 2022 · aca6c88 · aca6c88
1 parent 4dbdd73
commit aca6c88
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/packages/extension-bubble-menu/src/bubble-menu-plugin.ts b/packages/extension-bubble-menu/src/bubble-menu-plugin.ts
@@ -135,6 +135,10 @@ export class BubbleMenuView {
     this.hide()
   }
 
+  tippyBlurHandler = (event : FocusEvent) => {
+    this.blurHandler({ event })
+  }
+
   createTooltip() {
     const { element: editorElement } = this.editor.options
     const editorIsAttached = !!editorElement.parentElement
@@ -156,9 +160,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)
     }
   }
 
@@ -234,6 +236,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
@@ -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)