Skip to content

BubbleMenu being shown without a call to shouldShow #7520

@gurpreetatwal

Description

@gurpreetatwal

Affected Packages

extension-bubble-menu

Version(s)

3.19.0

Bug Description

I have a bubble menu that uses the default shouldShow function (i.e. show on text selection). However, the bubble menu sometimes appears even when no text is selected. I can reliably reproduce this by scrolling while the page is loading.

After debugging, I noticed that when the bubble menu incorrectly appears, it has this style attribute:

visibility: visible; width: max-content; position: absolute; left: -60px; top: 60.45px;

whereas a properly displayed bubble menu has:

visibility: visible; width: max-content; position: absolute; left: 112.942px; top: 117.783px; opacity: 1;

The key difference is the missing opacity property in the incorrect case.

I traced this to the updatePosition function, which is called by the resizeHandler on scroll and resize events.

The issue: updatePosition is setting visibility: visible without checking this.isVisible. This allows scroll/resize events to make the menu visible even when it shouldn't be shown. The visibility property should only be controlled by the show/hide functions, or at minimum, updatePosition should respect the this.isVisible state before modifying visibility.

Workaround: Setting opacity: 0 on the element hides it visually.

Note: The @tiptap/react BubbleMenu component doesn't set opacity: 0, which suggests this behavior may not be intentional.


My usage of bubble menu:

    const plugin = BubbleMenuPlugin({
      pluginKey,
      editor,
      element: ref,
      options: {
        flip: { boundary: editor.view.dom },
      },
    });

Browser Used

Firefox

Code Example URL

No response

Expected Behavior

The menu's position should only be updated if it is visible and the updating of position should not make an otherwise hidden menu visible.

Additional Context (Optional)

No response

Dependency Updates

  • Yes, I've updated all my dependencies.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Open SourceThe issue or pull reuqest is related to the open source packages of Tiptap.

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions