Bubble Menu flashes in Safari on click

[jasoncharnes]

What’s the bug you are facing?

We're using the BubbleMenu React component. When clicking a button inside the bubble menu to toggle a mark (bold, italic, etc.), the Tippy instance is hidden and shown again, causing the menu to flash in Safari. (This doesn't appear to happen in Chrome.)

Which browser was this experienced in? Are any special extensions installed?

Safari 16.1 on macOS 13.0.1. No special extensions.

How can we reproduce the bug on our side?

1. Visit the Bubble Menu framework example in the documentation
2. Select some text in the React example (with Editable checked)
3. Click bold, italic, or strike
4. Watch the bubble menu disappear and reappear quickly

Screen.Recording.2022-11-28.at.4.34.07.PM.mov

Can you provide a CodeSandbox?

No response

What did you expect to happen?

I expect the bubble menu to stay visible, adjusting its position (if needed) based on the selection's mark update.

Anything to add? (optional)

Please bear with me; I'm a Ruby developer masquerading as a JavaScript developer. 😅

Forgive me if this issue exists somewhere; I could not find it. 🤞

I've been able to stop the bubble menu flashing by tweaking the Bubble Menu's blurHandler.

The blur event runs when I click inside the bubble menu. Its relatedElement is the editor's HTML element. It doesn't match existing conditionals, so it calls this.hide(). If I return early when the related element is the editor, the menu doesn't flash. It appears to continue working as expected.

Screen.Recording.2022-11-28.at.4.51.26.PM.mov

I can PR this change, but I am nervous I misunderstand something fundamental or will break core functionality. I'm glad to help in any way!

---

We just started building a text editor with Tiptap, and it's been a ton of fun. Thanks for all your help and hard work!

Did you update your dependencies?

• Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• Yes, I’m a sponsor. 💖

[fractaledmind]

I can reproduce this issue, FWIW

[github-actions]

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days

[Dannybevers]

Can this fix added to the main repository? I got the same issue in Safari.

[pgvr]

Having the same issue. Can we re-open this?

[kongweiying2]

Yeah I'm also getting this issue. It seems to be related to this other issue #3625

Tagging @bdbch

[hellovietduc]

Why is this closed? I can still see the issue even in the Vue example in the documentation.

[hellovietduc]

In my case, I found that it only happens if we run a Tiptap command when clicking on a <button> inside the Bubble Menu. If I just console.log, the flash doesn't occur. I also found that the flash is caused by this code here. On other browsers, the blur event is not emitted at all, only on Safari.

[phgn0]

Indeed, removing these code lines with patch-package fixes the issue for me!

diff --git a/node_modules/@tiptap/extension-bubble-menu/dist/index.js b/node_modules/@tiptap/extension-bubble-menu/dist/index.js
index 183148c..c22c509 100644
--- a/node_modules/@tiptap/extension-bubble-menu/dist/index.js
+++ b/node_modules/@tiptap/extension-bubble-menu/dist/index.js
@@ -134,10 +134,6 @@ class BubbleMenuView {
             hideOnClick: 'toggle',
             ...this.tippyOptions,
         });
-        // maybe we have to hide tippy on its own blur event as well
-        if (this.tippy.popper.firstChild) {
-            this.tippy.popper.firstChild.addEventListener('blur', this.tippyBlurHandler);
-        }
     }
     update(view, oldState) {
         const { state } = view;

https://gist.github.com/phgn0/f236592a976fa13e35c91565bc5aab1e

[dbousamra]

Any updates on this?

[dbousamra]

I've actually discovered if you suppress the onMouseDown event from firing, it will stop the issue. I'm doing it on the direct child inside the BubbleMenu:

return (
    <HStack
      bg="white"
      w="full"
      rounded="lg"
      overflow="hidden"
      p={1}
      spacing={0}
      shadow="popover"
      onMouseDown={(e) => {
        e.stopPropagation();
        e.preventDefault();
      }}
    >
      <HStack spacing={2} w="full">
        <NodeTypeSelect editor={editor} />
        <VerticalDivider />
        <MarkSelect editor={editor} />
        <VerticalDivider />
        <AlignmentSelect editor={editor} />
        <VerticalDivider />
        <IndentSelect editor={editor} />
        <VerticalDivider />
        <TextColorSelect editor={editor} />
        <VerticalDivider />
        <CommentButton editor={editor} />
        <Spacer />
        <UndoRedo editor={editor} />
      </HStack>
    </HStack>
  );

[jmtimko5]

Seeing the same thing on Chrome on latest version, bug should be reopened

[YevhenTarashchyk]

looks like I still having this issue

[theazgra]

We are also affected by this bug. We are using button inside FloatingMenu to expand it. Blur event is immediately fired.

[tsmith14]

Based on @phgn0's reply above,

I was able to override the blur event when creating the BubbleMenu by passing in tippyOptions.onCreate

BubbleMenu.configure({
  ...
  tippyOptions: {
    onCreate: (instance) => {
      // Capture the blur event that was added in extension-bubble-menu and stopImmediatePropagation
      instance.popper.firstChild?.addEventListener('blur', (event) => {
        event.preventDefault();
        event.stopImmediatePropagation();
       })
     },
   }
})

For our use case, this prevents BubbleMenu from flashing in Safari and keeps everything working as expected in Chrome.

[udrzbarik]

I second @tsmith14's answer, it worked for me like a charm. Thank you for sharing this knowledge, super appreciated.

[bdbch]

Merged a PR related to this (see #5835). Look out for the next release, hopefully this issue will be fixed then.

[nperez0111]

Released with 2.10.0