How to disable autohidden floating buttons when click the dropdown menu.

[wenyongqd]

<FloatingToolbar>
      <FloatingToolbarButtons />
</FloatingToolbar>

Whenever I click the Textarea under AiToolbarButton the dropdown menu in floating buttons, it will autohide. How to disable it?

Here is the AiToolbarButton

export function AiToolbarButton() {
  
  return (
  <DropdownMenu>
    <DropdownMenuTrigger className="h-9 w-9" asChild>
      <ToolbarButton tooltip="Ask AI (⌘+⇧+M)" >
        <Icons.sparkles />
        <div className="absolute right-[8px] top-0 -translate-x-1 -translate-y-0.5">
          <div className="absolute rounded-md bg-pink-500 px-1 text-[0.75rem] font-semibold text-white">AI</div>
        </div>
      </ToolbarButton>
    </DropdownMenuTrigger>
    <DropdownMenuContent className="w-48" >
      <DropdownMenuGroup onClick={(event) => event.preventDefault()}>
        <DropdownMenuSub>
          <DropdownMenuItem className="h-8" onClick={handleExplainClick}>
            <Icons.puzzle color="#d585ac" size={18} className="mr-2"/>
            Explain this
            <DropdownMenuShortcut className="mr-[30px]">⌘E</DropdownMenuShortcut>
          </DropdownMenuItem>
          <Textarea onClick={(event) => event.preventDefault()}/>
        </DropdownMenuSub>
      </DropdownMenuGroup>
    </DropdownMenuContent>
  </DropdownMenu>
  );
}

[felixfeng33]

could you try preventDefault within onMouseDown.

[wenyongqd]

I think the problem is clicking the menu button will autohide FloatingToolbar and which leading to hide the dropdown menus as well.