-
-
Notifications
You must be signed in to change notification settings - Fork 2.9k
Description
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.