点击下拉菜单外部后Tooltip意外触发问题排查

我实现了一个包含Tooltip和Dropdown Menu的组件，触发下拉菜单后，点击菜单内部或外部关闭菜单时，Tooltip会被错误触发。正常场景下，鼠标悬停按钮时Tooltip触发正常，点击按钮打开下拉菜单也正常，但关闭菜单的操作会误触发Tooltip。

相关代码如下：

<DropdownMenu>
  <Tooltip>
    <DropdownMenuTrigger asChild>
      <TooltipTrigger asChild>
        <Button variant="ghost">
          Type
          <BiFilter className="ml-2 h-5 w-5" />
        </Button>
      </TooltipTrigger>
    </DropdownMenuTrigger>
    <DropdownMenuContent align="end">
      <DropdownMenuRadioGroup
        value={filter}
        onValueChange={handleFilterChange}
      >
        {ValuesToMap.map((value) => (
          <DropdownMenuRadioItem key={value} value={value}>
            value
          </DropdownMenuRadioItem>
        ))}
      </DropdownMenuRadioGroup>
    </DropdownMenuContent>
    <TooltipContent>
      Filter By Type
    </TooltipContent>
  </Tooltip>
</DropdownMenu>

解决方法 #

1. 调整组件嵌套层级 #

问题根源在于当前嵌套顺序让Tooltip监听了Dropdown菜单的交互事件。将Tooltip作为DropdownTrigger的子元素，而非包裹整个Dropdown，就能避免菜单关闭时的误触发：

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="ghost">
          Type
          <BiFilter className="ml-2 h-5 w-5" />
        </Button>
      </TooltipTrigger>
      <TooltipContent>
        Filter By Type
      </TooltipContent>
    </Tooltip>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end">
    <DropdownMenuRadioGroup
      value={filter}
      onValueChange={handleFilterChange}
    >
      {ValuesToMap.map((value) => (
        <DropdownMenuRadioItem key={value} value={value}>
          {value}
        </DropdownMenuRadioItem>
      ))}
    </DropdownMenuRadioGroup>
  </DropdownMenuContent>
</DropdownMenu>

2. 基于Dropdown状态禁用Tooltip #

如果需要保留原有嵌套结构，可以通过Dropdown的open状态控制Tooltip的启用状态。以shadcn/ui组件为例，使用useDropdownMenu钩子获取状态后，给Tooltip添加disabled属性：

import { useDropdownMenu } from '@/components/ui/dropdown-menu';

// 在组件内部获取状态
const { open } = useDropdownMenu();

// 渲染部分
<DropdownMenu>
  <Tooltip disabled={open}>
    <DropdownMenuTrigger asChild>
      <TooltipTrigger asChild>
        <Button variant="ghost">
          Type
          <BiFilter className="ml-2 h-5 w-5" />
        </Button>
      </TooltipTrigger>
    </DropdownMenuTrigger>
    <DropdownMenuContent align="end">
      {/* 菜单内容 */}
    </DropdownMenuContent>
    <TooltipContent>
      Filter By Type
    </TooltipContent>
  </Tooltip>
</DropdownMenu>

当Dropdown菜单处于打开状态时，Tooltip会被禁用，关闭菜单时就不会触发Tooltip了。

内容的提问来源于stack exchange，提问作者steve123