[Bug]: BubbleMenu preventHide stops menu from closing

Affected Packages

extension-bubble-menu vue-3

Version(s)

2.11.5

Bug Description

We use tip tap in a very complete way, our bubble menu contains buttons but also selects, as well as buttons that open popovers. In some case, the toolbar stays open and the only way to close it is to click inside the editor, while a simple click outside should be able to close it. Even when refocusing the editor isn't enough sometimes because preventHide will block the blur event to close the menu.

Thanks for this tool and for your feedback.

Browser Used

Chrome

Code Example URL

No response

Expected Behavior

As stated, in some cases I need to run:

      this.editor.chain().focus().run();
      this.editor.chain().blur().run();

Before to re focus the editor, otherwise, the blur won't be able to close the menu because of preventHide. Talking about this property preventHide from bubble-menu-plugin.ts:

    this.element.addEventListener('mousedown', this.mousedownHandler, { capture: true })
    this.editor.on('blur', this.blurHandler)

  mousedownHandler = () => {
    this.preventHide = true
  }
  blurHandler = ({ event }: { event: FocusEvent }) => {
    if (this.preventHide) {
      this.preventHide = false

      return
    }
    ...
}

What happens is that, for a normal button, the mousedown sets preventHide to true. Then it triggers the blur event because the button is focused instead of the editor.

I'm sure this code exist for a reason, but there is already event?.relatedTarget to prevent closing the toolbar when clicking on a button inside the bubble menu.

Another tiny problem being, for example, for selected, if you click on it but select nothing, the toolbar will stay open. I have to manually add a focusout event on each button to handle that case.

So maybe, adding a focusout on the toolbar plus the blur on the editor could bring a better behavior.

If I remove preventHide in this context, I have more control and less workaround code to write, maybe a prop disabling it could be cool?

Finally, since the event listener captures the mousedown on the toolbar it's not easy to disable it.

Also the shoudShow prop is useless here since triggered on blur too.

I'm down to make a PR to improve this, but would like to discuss why this code is here and we can improve this without breaking nothing.

One other nice thing might be to expose the show and hide methods of the component for a better high level control.

(Testbed on firefox / chrome / vue 3)

Additional Context (Optional)

No response

Dependency Updates

• Yes, I've updated all my dependencies.