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 }}

Turn Into {' '}

} itemsId="turnIntoOptions" options={bubbleMenuOptions} className="border" /> ... } dropdownClass="w-24" itemsId="colorOptions" options={colorOptions} /> ;

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 = ({
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>

);
};
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

[LukasPokryvka]

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