having issues integrating a dropdown in the bubblemenu

[upneet2213-onboard]

Hello team! Wanted to ask some questions about the bubblemenu/looking for some help. I have a bubblemenu in my rich text editor but a couple of the items in this menu are actually dropdowns.

<BubbleMenu
  editor={editor}
  tippyOptions={{ duration: 100 }}
>
  <div id="bubbleMenu" className="flex items-center relative">
    <Dropdown
      portal={false}
      showArrow={false}
      trigger={
        <div className="px-2 py-1 gap-2 flex items-center hover:bg-grey1 active:bg-grey2">
          <span className="text-grey7 whitespace-nowrap text-sm h-6">
            Turn Into
          </span>{' '}
          <Icon name="singleArrow" className="" color={ThemeConfig.grey7} />
        </div>
      }
      itemsId="turnIntoOptions"
      options={bubbleMenuOptions}
      className="border"
    />
    <Dropdown
      portal={false}
      closeOnSelect={true}
      showArrow={false}
      trigger={
        <div className="relative w-8 py-1.5 flex items-center justify-center border-r border-y hover:bg-grey1 active:bg-grey2">
          <Icon
            name="draw"
            color={ThemeConfig.grey7}
            width={20}
            height={20}
            // className="border-r border-y"
            fill="none"
          />
        </div>
      }
      dropdownClass="w-24"
      itemsId="colorOptions"
      options={colorOptions}
    />
  </div>
</BubbleMenu>;

This is my dropdown:

import React from 'react';
import Icon from '../Icon';
import Avatar from 'components/Avatar';
import { ThemeConfig } from 'utils/theme.config';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import { DropdownOptionInterface } from 'interfaces';

export type Props = {
  trigger: React.ReactNode;
  options: DropdownOptionInterface[];
  allOptionsClass?: string;
  dropdownClass?: string;
  triggerClassName?: string;
  itemsId?: string;
  showArrow?: boolean;
  className?: string;
  dropdownId?: string;
  optionId?: string;
  portal?: boolean;
  closeOnSelect?: boolean;
  disabled?: boolean;
};

const Dropdown: React.FC<Props> = ({
  trigger,
  options,
  dropdownClass,
  allOptionsClass,
  triggerClassName,
  itemsId,
  showArrow = true,
  className,
  dropdownId,
  optionId,
  portal = true,
  closeOnSelect = true,
  disabled,
}) => {
  const renderDropdownContent = () => {
    return (
      <DropdownMenu.Content
        id={itemsId}
      >
        {showArrow && (
          <DropdownMenu.Arrow
            color={ThemeConfig.white}
            fill={ThemeConfig.white}
          />
        )}
        {options.map((option) => {
          const { onClick, optionClass, disabled, isSeparator, subItems } =
            option;
            
          .....
          return (
            <>
              <DropdownMenu.Item
                key={option.id}
                onClick={(e) => {
                  onClick?.(optionId);
                  // e.preventDefault();
                  !closeOnSelect && e.preventDefault();
                }}

                disabled={disabled}
              >
                {option.icon && (
                  <Icon
                    name={option.icon}
                    width={option.iconStyles?.size}
                    height={option.iconStyles?.size}
                    color={option.iconStyles?.color}
                    fill={option.iconStyles?.fill}
                    className={option.iconStyles?.className}
                  />
                )}
                {option.profile && (
                  <Avatar
                    profileImage={option.profile.profileImage}
                    name={option.profile.name}
                  />
                )}

                {option.name}
              </DropdownMenu.Item>
              {isSeparator && (
                <DropdownMenu.Separator
                  style={{ height: 1, background: ThemeConfig.grey5 }}
                  className="my-0.5"
                />
              )}
            </>
          );
        })}
      </DropdownMenu.Content>
    );
  };
  return (
    <div className={`relative ${className}`} id={`trigger-${dropdownId}`}>
      <DropdownMenu.Root modal={false}>
        <DropdownMenu.Trigger
          disabled={disabled}
          onClick={(e: any) => {
            e.stopPropagation();
          }}
        >
          {trigger}
        </DropdownMenu.Trigger>
        {portal ? (
          <DropdownMenu.Portal>{renderDropdownContent()}</DropdownMenu.Portal>
        ) : (
          renderDropdownContent()
        )}
      </DropdownMenu.Root>
    </div>
  );
};
export default Dropdown;

The issue is that if I portal the dropdown, it closes the bubblemenu as soon as i click on the trigger and if i don't portal it, the onClick event on DropdownMenu.Item is never fired (checked via console logging too). Not sure where to go from here. Any help would be appreciated.

[amosbastian]

Just encountered the same problem 😓 did you manage to fix it?

EDIT: set modal to true instead of false and it should work

EDIT2: only seems to work sometimes 🤔

[danigo99]

Have you had any luck since this? Having the same problems with exactly the same setup but can't get modal=true to work ever 😕

[nhat-expa]

I recently ran into this issue with BubbleMenu and RadixUI dropdown. Setting the container in DropdownMenu container to the BubbleMenu ref seems to work for me: https://www.radix-ui.com/primitives/docs/components/dropdown-menu#portal.

1. Wrap BubbleMenu items:

const containerRef = useRef(null);
...
return (
  <BubbleMenu ...>
    <div ref={containerRef}>{menuItems}</div>
  </BubbleMenu>
)

2. Pass the ref to DropdownMenu Portal

<DropdownMenu.Portal container={containerRef.current}>{items}</DropdownMenu.Portal>

Hope that helps.

[raihan-ramadhan]

I'm stuck 2 days with this, thanks bro it's work

[Jonathan-Hofmann]

This solution also works for the Select component - Thx!

[LukasPokryvka]

If someone still has problem with it, using Popover instead of Dropdown solved my issue :)

[damien-schneider]

Thanks, I find this solution cleaner than passing the ref, works pretty well 👍

[bdbch]

Just to add a little bit more context on why this is happening:

Shadcn Dropdown & Select components will move your focus out of your editor and the bubble menu when they are opened. Whenever this happens, the BubbleMenu will usually unrender which also causes your menu to be removed.

See #4145 (comment) for the fix.

[Mahesh1356]

Is this solution works for tiptap version 3

[Mahesh1356]

This is not working, can anyone help me. once i click the open trigger button .. bubble menu lose its focus

{ const { from, to } = state.selection; const hasSelection = from !== to; return hasSelection; }} resizeDelay={0} updateDelay={0} > Open My Account Profile ⇧⌘P Billing ⌘B Settings ⌘S Keyboard shortcuts ⌘K Team Invite users Email Message More... New Team ⌘+T GitHub editor?.chain().focus().toggleBold().run()}>Bold API Log out ⇧⌘Q

[bdbch]

Hey @Mahesh1356, I’m having a bit of trouble understanding exactly what you’re running into—could you clarify a bit more what you expect to happen and what’s actually happening? Also, if you could format your code a bit, that would help a lot in figuring things out.

That said, from what I can gather, it sounds like your dropdown in the BubbleMenu is causing the menu to lose focus and close as soon as you click the trigger. If that’s the case, you might want to try the solution mentioned earlier in this thread: wrap your BubbleMenu items in a ref, and then pass that ref as the container prop to the DropdownMenu.Portal. This keeps the dropdown inside the BubbleMenu’s DOM hierarchy and should prevent the focus loss.

Here’s a rough outline:

const containerRef = useRef(null);

return (
  <BubbleMenu ...>
    <div ref={containerRef}>
      {/* your menu items here */}
    </div>
  </BubbleMenu>
);

// Then in your dropdown:
<DropdownMenu.Portal container={containerRef.current}>{items}</DropdownMenu.Portal>

If you’ve already tried this and it’s still not working, let us know what version you’re on and any error messages or console logs you’re seeing. The more details you can provide, the easier it’ll be to help!