Dropdown inside Popover

[seleckis]

I'm trying to implement popover as a bubble toolbar for rich text editor. When focussing RTE the Popover is opening and focus remains in RTE while editing and interacting with buttons inside popover. I need to put Dropdown inside Popover to group buttons. Here comes the problem with focusing. Every time I trigger Dropdown to open, focus moves to Dropdown, RTE loses focus and everything (Popover and Dropdown) closes immediately.

How to prevent moving focus to Dropdown when opening it?

Code example:

<Popover>
  <PopoverContent
    onOpenAutoFocus={(e) => e.preventDefault()}
    onInteractOutside={(e) => e.preventDefault()}
    side="top"
  >
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <ToolbarButton>
          <ChevronDown />
        </ToolbarButton>
      </DropdownMenuTrigger>
      <DropdownMenuContent
        onCloseAutoFocus={(e) => {
          e.preventDefault();
          e.stopPropagation();
        }}
      >
        <DropdownMenuItem>
          <ParagraphButton />
        </DropdownMenuItem>
        <DropdownMenuItem>
          <HeadingButton level={1} />
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
    <BoldButton />
    <ItalicButton />
  </PopoverContent>
  <PopoverTrigger asChild>
    <EditorContent />
  </PopoverTrigger>
</Popover>

[mohamedamara1]

I'm facing the same issue, any solutions ?

[seleckis]

I have replaces outer Popover with my own impementation of popover and then inside I'm using Popover instead of Dropdown. Then for inner popover I do: onClick={() => editor.commands.focus()} for PopoverTrigger. Maybe this tip could help