Shadcn/Ui中Dialog组件内Dropdown菜单点击无响应问题求助

问题现象 #

Dialog模态框弹出后，点击Dropdown的触发按钮，下拉菜单无法正常显示；但将Dropdown替换为AlertDialog时功能正常。

提供的代码 #

拦截路由（DetailModal组件） #

export default function DetailModal() {
  const params = useParams<{ id: string }>();
  const router = useRouter();

  const { data, isLoading } = useGetDetailPost({ postId: params.id });

  return (
    <Dialog
      defaultOpen={true}
      onOpenChange={(open) => {
        if (!open) {
          router.back();
        }
      }}
    >
      <DialogContent className="bg-bw max-w-[50vw]">
        <DialogTitle>
          <VisuallyHidden />
        </DialogTitle>
        <LoadingState
          data={data?.data}
          loadingFallback={<SkeletonCard length={1} />}
        >
          <PostDetail post={data?.data} isLoading={isLoading} dbUserId="id" />
        </LoadingState>
      </DialogContent>
    </Dialog>
  );
}

Dropdown组件代码 #

<DropdownMenu modal={false}>
  <DropdownMenuTrigger asChild>
    <MoreHorizontalIcon className="w-4 aspect-square cursor-pointer hover:text-gray-600" />
  </DropdownMenuTrigger>
  <DropdownMenuContent
    side="left"
    className="bg-bw z-[1000]"
    align="start"
  >
    <DropdownMenuItem
      className="cursor-pointer bg-bw"
      onClick={() => setOpenEditDialog(true)}
    >
      Edit Komen
    </DropdownMenuItem>
    <DropdownMenuItem
      onClick={() => setOpenDeleteDialog(true)}
      className="cursor-pointer focus:bg-destructive focus:text-bw bg-bw"
    >
      Hapus Komen
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

可能原因分析 #

• 层级遮挡：Dialog的z-index默认值可能高于DropdownContent设置的z-[1000]，导致下拉菜单被模态框或其遮罩层覆盖
• 事件拦截：Dialog的模态遮罩层会拦截点击事件，即使Dropdown设置了modal={false}，仍可能无法穿透触发下拉
• 挂载上下文限制：Dropdown菜单默认挂载在Dialog内部，继承了Dialog的样式或行为限制，无法正常渲染

解决方案 #

1. 提升Dropdown的层级优先级 #

修改DropdownMenuContent的z-index，确保其高于Dialog的层级：

<DropdownMenuContent
  side="left"
  className="bg-bw z-[10000]" // 大幅提高z-index值
  align="start"
>
  {/* ... 菜单选项 ... */}
</DropdownMenuContent>

2. 将下拉菜单挂载到body节点 #

使用Radix UI的portal属性，让下拉菜单脱离Dialog的上下文，直接挂载到body下：

<DropdownMenuContent
  side="left"
  className="bg-bw z-[1000]"
  align="start"
  portal={true} // 添加portal属性
>
  {/* ... 菜单选项 ... */}
</DropdownMenuContent>

3. 调整Dialog的模态行为 #

如果Dialog默认启用了模态拦截，可尝试关闭模态或调整遮罩属性（以Radix UI为例）：

<Dialog
  defaultOpen={true}
  onOpenChange={(open) => {
    if (!open) {
      router.back();
    }
  }}
  modal={false} // 关闭Dialog的模态特性
>
  {/* ... Dialog内容 ... */}
</Dialog>

注意：关闭Dialog模态后，需要自行处理页面背景的交互限制

4. 检查焦点管理配置 #

Dialog默认会捕获焦点，可能导致Dropdown触发按钮无法正确响应点击。可尝试指定Dialog的初始焦点，或禁用焦点捕获：

<Dialog
  defaultOpen={true}
  onOpenChange={(open) => {
    if (!open) {
      router.back();
    }
  }}
  preventScroll={false} // 禁止滚动锁定
  initialFocusRef={/* 指向Dropdown触发按钮的ref */}
>
  {/* ... Dialog内容 ... */}
</Dialog>

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