BubbleMenu trigger option & updateDelay not working on focus events

[tomo-kn]

Summary

After migrating to Tiptap v3, I noticed that BubbleMenu has some focus-related issues that were easier to handle in v2 with tippy.js options.

Context

I'm using custom shouldShow to display BubbleMenu only when specific nodes are active (e.g., links, images, tables). I added view.hasFocus() check as recommended in the docs.

Issue 1: Flickering on click-through

Steps to reproduce:

1. Click on a link → BubbleMenu shows (OK)
2. Click outside editor → BubbleMenu hides (OK)
3. Click on non-link text inside editor → Menu briefly flashes then hides

Cause:

When clicking inside the editor, focus returns before selection updates:

1. Focus event fires → view.hasFocus() = true
2. Selection still on link (transitional state) → isActive('link') = true
3. shouldShow returns true → Menu shows (flicker!)
4. Selection updates → isActive('link') = false → Menu hides

Issue 2: updateDelay doesn't help

I tried using updateDelay to debounce the evaluation, but it has no effect on focus events.

Looking at the source code, I found that focusHandler doesn't pass oldState:

// bubble-menu-plugin.ts
focusHandler = () => {
  setTimeout(() => this.update(this.editor.view))  // oldState not passed
}

The debounce logic in handleDebouncedUpdate requires oldState to work, so it gets skipped for focus events.

Feature Request: trigger option

In tippy.js, we could use trigger: 'click' to show the menu only on explicit clicks. This would solve the flickering issue because selection would be stable before evaluation.

Would it be possible to add a similar option to BubbleMenu?

<BubbleMenu
  trigger="click"  // 'click' | 'focus' | 'selection' (default)
  shouldShow={...}
>

Current Workaround

Using view.hasFocus() in shouldShow helps with blur, but doesn't prevent the click-through flickering.

Environment

• @tiptap/react: v3.x
• @tiptap/extension-bubble-menu: v3.x

Thanks for any insights! 🙏

---

---

---

Additional context: Why this worked in v2

After more investigation, I found the root cause of this regression.

In v2 with Tippy.js, we had:

tippyOptions: {
  trigger: 'click',
}

Tippy.js itself handled the show/hide timing based on click events. The shouldShow callback was mainly for initial evaluation, and subsequent visibility control was managed by Tippy's internal trigger mechanism. This abstracted away any timing differences between focus and selection state updates.

In v3 with Floating UI:

• No trigger option exists
• No duration or delay options exist
• All visibility control now relies entirely on shouldShow
• shouldShow is evaluated on every update

The flickering happens because:

1. view.hasFocus() updates immediately (DOM-level)
2. editor.isActive() updates after the transaction is processed (ProseMirror state-level)

In v2, Tippy's click-based trigger mechanism naturally synchronized these timings. In v3, we're exposed to the raw timing mismatch.

Possible solutions for the Tiptap team:

• Add a trigger option similar to Tippy's
• Add showDelay / hideDelay options
• Ensure shouldShow is evaluated after selection state is fully updated

Related

• [PRO]: DragHandle extension conflicts with BubbleMenu #6148