fix(bubble-menu): add focusout handler for floating element

.changeset/twelve-turtles-cry.md

@@ -0,0 +1,8 @@
+---
+"@tiptap/extension-bubble-menu": patch
+"@tiptap/react": patch
+"@tiptap/vue-2": patch
+"@tiptap/vue-3": patch
+---
+
+Fix the bug where the bubble menu does not hide

packages/extension-bubble-menu/src/bubble-menu-plugin.ts

@@ -123,6 +123,7 @@ export class BubbleMenuView {
     }
 
     this.element.addEventListener('mousedown', this.mousedownHandler, { capture: true })
+    this.element.addEventListener('focusout', this.floatingFocusoutHandler)
     this.view.dom.addEventListener('dragstart', this.dragstartHandler)
     this.editor.on('focus', this.focusHandler)
     this.editor.on('blur', this.blurHandler)
@@ -132,6 +133,10 @@ export class BubbleMenuView {
     this.element.style.visibility = 'visible'
   }
 
+  floatingFocusoutHandler = (event: FocusEvent) => {
+    this.blurHandler({ event })
+  }
+
   mousedownHandler = () => {
     this.preventHide = true
   }
@@ -303,6 +308,7 @@ export class BubbleMenuView {
     }
     this.tippy?.destroy()
     this.element.removeEventListener('mousedown', this.mousedownHandler, { capture: true })
+    this.element.removeEventListener('focusout', this.floatingFocusoutHandler)
     this.view.dom.removeEventListener('dragstart', this.dragstartHandler)
     this.editor.off('focus', this.focusHandler)
     this.editor.off('blur', this.blurHandler)

packages/react/src/BubbleMenu.tsx

@@ -50,7 +50,7 @@ export const BubbleMenu = (props: BubbleMenuProps) => {
   }, [props.editor, currentEditor, element])
 
   return (
-    <div ref={setElement} className={props.className} style={{ visibility: 'hidden' }}>
+    <div ref={setElement} tabIndex={-1} className={props.className} style={{ visibility: 'hidden' }}>
       {props.children}
     </div>
   )

packages/vue-2/src/BubbleMenu.ts

@@ -61,7 +61,7 @@ export const BubbleMenu: Component = {
   },
 
   render(this: BubbleMenuInterface, createElement: CreateElement) {
-    return createElement('div', { style: { visibility: 'hidden' } }, this.$slots.default)
+    return createElement('div', { style: { visibility: 'hidden' }, attrs: { tabIndex: -1 } }, this.$slots.default)
   },
 
   beforeDestroy(this: BubbleMenuInterface) {

packages/vue-3/src/BubbleMenu.ts

@@ -66,6 +66,6 @@ export const BubbleMenu = defineComponent({
       editor.unregisterPlugin(pluginKey)
     })
 
-    return () => h('div', { ref: root }, slots.default?.())
+    return () => h('div', { ref: root, tabindex: -1 }, slots.default?.())
   },
 })