(Base-UI) Possible issue with autofocus when using AlertDialogTrigger inside of a DropdownMenu

[rafa-br34]

I'm trying to make a very simple DropdownMenu that invokes a Dialog if a certain option is used (Delete plan in my case)
My current approach is as follows

<div className="flex gap-1 w-4">
	<AlertDialog>
		<DropdownMenu>
			<DropdownMenuTrigger
				render={
					<Button variant="default" className="h-8 w-8 p-0">
						<FaWrench className="h-4 w-4" />
					</Button>
				}
			/>
			<DropdownMenuContent align="end">
				<DropdownMenuGroup>
					<DropdownMenuLabel>Actions</DropdownMenuLabel>
					<DropdownMenuItem>View details</DropdownMenuItem>
					<DropdownMenuItem>Edit plan</DropdownMenuItem>
					<DropdownMenuItem>Duplicate plan</DropdownMenuItem>
					<DropdownMenuSeparator />
					<AlertDialogTrigger
						render={<DropdownMenuItem variant="destructive">Delete plan</DropdownMenuItem>}
						nativeButton={false}
					/>
				</DropdownMenuGroup>
			</DropdownMenuContent>
		</DropdownMenu>
		<AlertDialogContent>
			<AlertDialogHeader>
				<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
				<AlertDialogDescription>
					This action cannot be undone. This plan will be permanently deleted.
				</AlertDialogDescription>
			</AlertDialogHeader>
			<AlertDialogFooter>
				<AlertDialogCancel>Cancel</AlertDialogCancel>
				<AlertDialogAction>Continue</AlertDialogAction>
			</AlertDialogFooter>
		</AlertDialogContent>
	</AlertDialog>
</div>

It works fine for the most part, but the issue is that the Delete plan option is focused by default as soon as the DropdownMenu is opened.

I have tried to apply solutions from discussion #2307; however, none of them worked.
My sincere apologies if this is caused by something obvious that I missed, as this is my first time utilizing shadcn/ui and Base-UI.

[gebt2000]

This is a common focus-management conflict when nesting menu -> dialog triggers.

DropdownMenu tries to restore focus to the trigger when it closes, while AlertDialog tries to move focus into the dialog at open. If both happen in the same tick, autofocus can look broken.

Typical fix pattern:

1. In the menu item handler, preventDefault() and control dialog open state manually.
2. Close the menu first, then open dialog on next microtask/tick (requestAnimationFrame/setTimeout(0)).
3. Keep dialog trigger outside the dropdown content if possible (state-driven open is usually more predictable).

So instead of trigger-inside-item composition, wire it as:

• menu item click -> set openDialog(true)
• render AlertDialog open={openDialog}

That usually resolves the autofocus race.

If this solves it for your setup, feel free to mark accepted.

[rafa-br34]

That works, thanks!

[sueun-dev]

The existing explanation nails the root cause. Here's what's specifically happening with your setup and the working code.

Why the autofocus happens

When AlertDialogTrigger is placed inside DropdownMenuContent, it's treated as a focusable element inside the menu's popup. Base-UI's focus management autofocuses the first tabbable item when the menu opens, and the AlertDialogTrigger (even with nativeButton={false}) gets picked up by that focus pass — which is why "Delete plan" ends up focused immediately on open.

The fix: remove the trigger from the menu entirely

Drive the dialog with state instead of trigger composition:

import { useState } from "react";

export function PlanActions() {
  const [deleteOpen, setDeleteOpen] = useState(false);

  return (
    <div className="flex gap-1 w-4">
      <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
        <DropdownMenu>
          <DropdownMenuTrigger
            render={
              <Button variant="default" className="h-8 w-8 p-0">
                <FaWrench className="h-4 w-4" />
              </Button>
            }
          />
          <DropdownMenuContent align="end">
            <DropdownMenuGroup>
              <DropdownMenuLabel>Actions</DropdownMenuLabel>
              <DropdownMenuItem>View details</DropdownMenuItem>
              <DropdownMenuItem>Edit plan</DropdownMenuItem>
              <DropdownMenuItem>Duplicate plan</DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem
                variant="destructive"
                onClick={() => setDeleteOpen(true)}
              >
                Delete plan
              </DropdownMenuItem>
            </DropdownMenuGroup>
          </DropdownMenuContent>
        </DropdownMenu>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. This plan will be permanently deleted.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction>Continue</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}

The two key changes from your original:

1. Replace <AlertDialogTrigger render={<DropdownMenuItem ...>} nativeButton={false} /> with a plain <DropdownMenuItem onClick={() => setDeleteOpen(true)}> — no trigger in the menu at all
2. Control the dialog via <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>

With no AlertDialogTrigger inside the menu content, focus management works normally and the menu opens without any unexpected autofocus.

[rafa-br34]

Thanks for your answer! Yes, I have changed it to use an external state (and external dialog too, since there's no point in instantiating a dialog for every item).