Link in DropdownMenuItem closes the DropdownMenu when hovered over.

[paul040696]

I have a simple DropdownMenu with some actions. One of them is a link from next/link that should redirect the user to a details page. Whenever the mouse hovers over the Link (not item) the dropdownMenu will automatically close. I've tried to stopPropagation at onMousEnter, onClick, onSelect, I marked the dropdownItem asChild but none of this work. I have a very similar implementation for another table on a different page but there everything works fine.
If I disable Link's prefetch it works but I'd like to keep it for performance benefits.

NOT WORKING (locale comes from useLocla hook from next-intl and the dropdownMenu is rendered inside a tanstack/react-table)

const columns: ColumnDef<ApiKey>[] = [
  {
    id: "select",
    header: ({ table }) => (
      <Checkbox
        checked={table.getIsAllRowsSelected()}
        onCheckedChange={(value) => table.toggleAllRowsSelected(!!value)}
        aria-label="Select all"
      />
    ),
    cell: ({ row }) => (
      <div className="flex items-center">
        <Checkbox
          checked={row.getIsSelected()}
          onCheckedChange={(value) => row.toggleSelected(!!value)}
          aria-label="Select row"
        />
      </div>
    ),
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: "value",
    header: () => {
      return (
        <Button variant="ghost" onClick={() => setSort("value")}>
          {t("labels.key")}
          <ArrowUpDown className="ml-2 size-4" />
        </Button>
      )
    },
    cell: ({ row }) => {
      const val: string = row.getValue("value")
      const masked = val
        .split("")
        .map((c, index) => (index > 2 && index < val.length - 5 ? "*" : c))
        .join("")
      return (
        <div className="flex items-center gap-2 px-4 ">
          <Button
            className="px-2"
            variant={"outline"}
            onClick={() => {
              revealKey[+row.id] = !revealKey[+row.id]
              setRevealKey([...revealKey])
            }}
          >
            {revealKey[+row.id] ? (
              <EyeOff className="h-4" />
            ) : (
              <Eye className="h-4" />
            )}
          </Button>
          {revealKey[+row.id] ? val : masked}
        </div>
      )
    },
  },
  {
    accessorKey: "accessedAt",
    header: () => {
      return (
        <Button variant="ghost" onClick={() => setSort("accessedAt")}>
          {t("labels.accessed")}
          <ArrowUpDown className="ml-2 size-4" />
        </Button>
      )
    },
    cell: ({ row }) => (
      <div className="px-4">
        {row.getValue("accessedAt")
          ? new Date(row.getValue("accessedAt")).toLocaleDateString()
          : "-"}
      </div>
    ),
  },
  {
    accessorKey: "createdAt",
    header: () => {
      return (
        <Button variant="ghost" onClick={() => setSort("createdAt")}>
          {t("labels.added")}
          <ArrowUpDown className="ml-2 size-4" />
        </Button>
      )
    },
    cell: ({ row }) => (
      <div className="px-4">
        {new Date(row.getValue("createdAt")).toLocaleDateString()}
      </div>
    ),
  },
  {
    id: "actions",
    enableHiding: false,
    cell: ({ row }) => {
      return (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" className="size-8 p-0">
              <span className="sr-only">{t("labels.open-menu")}</span>
              <MoreHorizontal className="size-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuLabel>{t("labels.actions")}</DropdownMenuLabel>
            <DropdownMenuGroup>
              <DropdownMenuItem
                onClick={() =>
                  navigator.clipboard.writeText(row.original.value ?? "")
                }
              >
                <Copy className="mr-2 size-4" />
                <span>{t("labels.copy-api-key-value")}</span>
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem
                onClick={() => {
                  setSelectedApiKey(row.original)
                  setApiKeyModalOpen(true)
                }}
              >
                <PenIcon className="mr-2 size-4" />
                <span>{t("labels.edit")}</span>
              </DropdownMenuItem>

              <DropdownMenuItem>
                <Link
                  href={`${locale}/dashboard/api-keys/logs/${row.original.id}`}
                  className="flex items-center"
                >
                  <Eye className="mr-2 size-4" />
                  {t("labels.view-logs")}
                </Link>
              </DropdownMenuItem>
              <DropdownMenuItem>
                {row.original.isDisabled ? (
                  <div
                    className="flex items-center"
                    onClick={() =>
                      submitApikey({ id: row.original.id, isDisabled: false })
                    }
                  >
                    <ShieldCheck className="mr-2 size-4" />
                    <span>{t("labels.enable")}</span>
                  </div>
                ) : (
                  <div
                    className="flex items-center text-destructive"
                    onClick={() =>
                      submitApikey({ id: row.original.id, isDisabled: true })
                    }
                  >
                    <ShieldX className="mr-2 size-4" />
                    <span>{t("labels.disable")}</span>
                  </div>
                )}
              </DropdownMenuItem>
            </DropdownMenuGroup>
          </DropdownMenuContent>
        </DropdownMenu>
      )
    },
  },
]

WORKING:

const columns: ColumnDef<Valuation>[] = [
  {
    id: "select",
    header: ({ table }) => (
      <Checkbox
        checked={table.getIsAllRowsSelected()}
        onCheckedChange={(value) => table.toggleAllRowsSelected(!!value)}
        aria-label="Select all"
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={(value) => row.toggleSelected(!!value)}
        aria-label="Select row"
      />
    ),
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: "id",
    header: ({ column }) => {
      return (
        <Button variant="ghost" onClick={() => setSort("id")}>
          ID
          <ArrowUpDown className="ml-2 size-4" />
        </Button>
      )
    },
    cell: ({ row }) => <div className="px-4">{row.getValue("id")}</div>,
  },
  {
    accessorKey: "street",
    header: ({ column }) => {
      return (
        <Button variant="ghost" onClick={() => setSort("street")}>
          {t("dashboard.valuations.table.street")}
          <ArrowUpDown className="ml-2 size-4" />
        </Button>
      )
    },
    cell: ({ row }) => (
      <div className="px-4">
        {[
          row.original.street,
          row.original.streetNumber,
          row.original.zip,
          row.original.city,
          row.original.region ?? "-",
          row.original.province ?? "-",
        ]
          .filter(Boolean)
          .join(", ")}
      </div>
    ),
  },
  {
    accessorKey: "users",
    header: ({ column }) => {
      return (
        <Button variant="ghost" onClick={() => {}}>
          {t("dashboard.valuations.table.assignees")}
          {/*<ArrowUpDown className="ml-2 size-4" />*/}
        </Button>
      )
    },
    cell: ({ row }) => {
      const users = row?.getValue("users") as User[]

      return (
        <div className="px-4">
          {
            <div className="flex">
              {users.slice(0, 4).map((user: User) => (
                <AssigneeAvatar key={user.id} user={user} />
              ))}
              {users.length > 4 ? (
                <a className="ml-1 self-center text-xs text-muted-foreground">
                  +{users.length - 4}
                </a>
              ) : (
                ""
              )}
            </div>
          }
        </div>
      )
    },
  },
  {
    accessorKey: "createdAt",
    header: ({ column }) => {
      return (
        <Button variant="ghost" onClick={() => setSort("createdAt")}>
          {t("dashboard.valuations.table.added")}
          <ArrowUpDown className="ml-2 size-4" />
        </Button>
      )
    },
    cell: ({ row }) => (
      <div className="px-4">
        {new Date(row.getValue("createdAt")).toLocaleDateString()}
      </div>
    ),
  },
  {
    id: "actions",
    enableHiding: false,
    cell: ({ row }) => {
      return (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" className="size-8 p-0">
              <span className="sr-only">{t("labels.open-menu")}</span>
              <MoreHorizontal className="size-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuLabel>{t("labels.actions")}</DropdownMenuLabel>
            <DropdownMenuGroup>
              <DropdownMenuItem
                onClick={() =>
                  navigator.clipboard.writeText(row.original.id ?? "")
                }
              >
                <Copy className="mr-2 size-4" />
                <span>{t("labels.copy-val-id")}</span>
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <Link href={`valuations/${row.original.id}`}>
                  <Eye className="mr-2 inline size-4" />
                  {t("labels.view-valuation")}
                </Link>
              </DropdownMenuItem>
              <DropdownMenuItem
                onClick={() => {
                  setSelectedValuation(row.original)
                  setAssignmentModalOpen(true)
                }}
              >
                <UserPlus className="mr-2 size-4" />
                <span>{t("labels.assign")}</span>
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem
                className="text-destructive focus:bg-destructive/20 focus:text-destructive"
                onClick={() => {
                  setSelectedValuation(row.original)
                  setBulkDeleteModalOpen(true)
                }}
              >
                <Trash className="mr-2 size-4" />
                <span>{t("labels.delete")}</span>
              </DropdownMenuItem>
            </DropdownMenuGroup>
          </DropdownMenuContent>
        </DropdownMenu>
      )
    },
  },
]