Popover causing whole page to freeze

[LukasPokryvka]

Hi. I am trying to use Popover component inside of Dialog component, based on dashboard example. When I copy paste code, opening this dialog causes whole page to freeze. When I delete everything and leave code as this

<Dialog open={showNewTeamDialog} onOpenChange={setShowNewTeamDialog}>
      <Popover>
        <PopoverTrigger>trigger</PopoverTrigger>
        <PopoverContent>Place content for the popover here.</PopoverContent>
      </Popover>
    </Dialog>

it works and open popover correctly. As soon as I add props like open or onOpenChange, I get this freezing state. Also when I add something inside of PopoverTrigger, like Button, and set PopoverTrigger 'asChild' prop, same freezing happens.

Nextjs v13.4.3 @radix-ui/react-popover v1.0.6

I have followed manual installation of all components, I've already used some of them and everything is working. I would like to use this popover same way, as it is used in dashboard example. Can you help me with this?

[dan5py]

Can you provide the info of the system you are using (OS, Browser, etc.) and reproduce the issue in a codesandbox (or something similar).

[rodrgds]

Experiencing the same issue of Edge, Windows 11 using Next.js 13.4.8

[benjick]

I'm having the same issue, but with Dialog + DropdownMenu. I have this in my data table. After opening the Dialog and closing it the whole page loses interactivity, it's like some invisible overlay is still present and I'm forced to reload the page.

export function DataTableRowActions<TData>({
  row,
}: DataTableRowActionsProps<TData>) {
  const task = TaskSelectSchema.parse(row.original);

  return (
    <Dialog>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button
            variant="ghost"
            className="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
          >
            <MoreHorizontalIcon className="h-4 w-4" />
            <span className="sr-only">Open menu</span>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="w-[160px]">
          <DropdownMenuItem>
            <Link href={`/larare/edit/${task.id}`}>Redigera</Link>
          </DropdownMenuItem>
          <DropdownMenuItem disabled>Duplicera</DropdownMenuItem>
          <DialogTrigger asChild>
            <DropdownMenuItem>Ta bort</DropdownMenuItem>
          </DialogTrigger>
        </DropdownMenuContent>
      </DropdownMenu>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Är du helt säker?</DialogTitle>
          <DialogDescription>
            text
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <form action={removeTaskForm}>
            <input type="hidden" name="taskId" value={task.id} />
            <LoadingButton type="submit">Jag är säker</LoadingButton>
          </form>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

[nelsonfrz]

I am also encountering the same issue when using Select in Dialog and then closing the dialog by clicking outside of it. Does anyone have a fix?

[benjick]

<DropdownMenu modal={false}> solved it for me, but I don't know why

[HansBhatia]

@benjick this works for me, my issue was with a sheet in a context menu.

[AndreasHGK]

Im having this issue but with a DropdownMenu (regardless of whether it is in a Dialog or not). I am using firefox 125.0.3. It happens even when I disable all my extensions and disable browser cache. It does work almost perfectly when I either open my page using firefox incognito mode or plain chromium. I say almost here, because if I call useRouter().refresh(), opening the dropdown will also cause the whole page to freeze in both chromium and firefox with incognito mode.

I was about to post this when I ran the following command

$ yarn list --pattern next
yarn list v1.22.22
├─ @next/[email protected]
├─ @next/[email protected]
├─ @next/[email protected]
├─ @next/[email protected]
├─ @next/[email protected]
├─ @next/[email protected]
├─ @next/[email protected]
├─ @next/[email protected]
├─ @next/[email protected]
├─ @next/[email protected]
├─ @next/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
   ├─ @next/[email protected]
   ├─ @next/[email protected]
   ├─ @next/[email protected]
   ├─ @next/[email protected]
   ├─ @next/[email protected]
   ├─ @next/[email protected]
   ├─ @next/[email protected]
   ├─ @next/[email protected]
   ├─ @next/[email protected]
   ├─ @next/[email protected]
   └─ [email protected]

I noticed one of my dependencies was using a different version of nextjs. Removing the dependency with the older nextjs version fixed the issue for me.

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.