I tried to add shadcn menubar to bubble menu but not working

[Milind-Jamnekar]

My MenuBar is in BubbleMenu component like this <BubbleMenu> <MenuBar /> </BubbleMenu>

and currently my menubar is just example from shadcn lib which look like this
<Menubar> <MenubarMenu> <MenubarTrigger onClick={() => editor.chain().focus().toggleBold().run()} disabled={!editor.can().chain().focus().toggleBold().run()} > File </MenubarTrigger> <MenubarContent> <MenubarPortal container={}> <MenubarItem> New Tab <MenubarShortcut>⌘T</MenubarShortcut> </MenubarItem> <MenubarItem> New Window <MenubarShortcut>⌘N</MenubarShortcut> </MenubarItem> <MenubarItem disabled>New Incognito Window</MenubarItem> <MenubarSeparator /> <MenubarSub> <MenubarSubTrigger>Share</MenubarSubTrigger> <MenubarSubContent> <MenubarItem>Email link</MenubarItem> <MenubarItem>Messages</MenubarItem> <MenubarItem>Notes</MenubarItem> </MenubarSubContent> </MenubarSub> <MenubarSeparator /> <MenubarItem> Print... <MenubarShortcut>⌘P</MenubarShortcut> </MenubarItem> </MenubarPortal> </MenubarContent> </MenubarMenu> <Menubar>

Tiptap.setup.mov

well you can see here what's the problem. I am guessing when I click menu, bubble menu removing focus resulting removing entire menu as well from Dom and then menu drop down get rendered random in corner. I don't know how to solve it ? might need someone help

[liyasthomas]

I'm having the same issue. Did anyone find a fix?

[liyasthomas]

@Milind-Jamnekar have you solved this issue?

[nperez0111]

You need to keep the bubble menu open when the shadcn menu is open with the shouldShow prop on the bubble menu. On clicking anything in the menu you need to have it also toggle a Boolean to keep the bubble menu active since you've now blurred the editor.