AlertDialog unable to cancel when DialogTrigger is controlled

[steveoh]

Provide a general summary of the issue here

The close render prop of the AlertDialog does not have any affect on the Dialog when the DialogTrigger is controlled via isOpen.

🤔 Expected Behavior?

The AlertDialog should have the ability to close a controlled Dialog.

😯 Current Behavior

There is no way to update the controlled state of the Dialog from the AlertDialog.

💁 Possible Solution

Accept an onCancel prop that can be chained to the close

🔦 Context

I have a table with a destructive action that i would like to open an AlertDialog. In order to have one drigger, model, and dialog I figured I needed to control the state of the Dialog. Especially since the table has other Pressable items that would automatically open the Dialog which would not be desired.

🖥️ Steps to Reproduce

const [dialogOpen, setDialogOpen] = useState<boolean>(false);

<Button variant="destructive" onPress={() => setDialogOpen(true)}>
  Reject
</Button>

<DialogTrigger isOpen={dialogOpen}>
  <Modal>
    <AlertDialog
      title="Reject submission"
      variant="destructive"
      actionLabel="Reject"
      onCancel={() => {
        setDialogOpen(false);
      }}
      onAction={() => {
        setDialogOpen(false);
      }}
    >
      <div className="grid grid-cols-1 gap-4">
        ...
      </div>
    </AlertDialog>
  </Modal>
</DialogTrigger>

Version

react-aria-tailwind-starter.ab9fd5c68

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macos

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

I've tested this locally in the tailwind starter via the following and it seems to work:

export function Test(args) {
  let [open, setOpen] = useState(false);
  return (
    <DialogTrigger isOpen={open} onOpenChange={setOpen}>
      <Button variant="secondary">Delete…</Button>
      <Modal>
        <AlertDialog {...args} />
      </Modal>
    </DialogTrigger>
  )
}

Test.story = {
  args: {
    title: 'Delete folder',
    children: 'Are you sure you want to delete "Documents"? All contents will be permanently destroyed.',
    variant: 'destructive',
    actionLabel: 'Delete'
  }
}

Am I misunderstanding the ask here?

[steveoh]

I don't think you are missing anything. Is the difference that I am using onAction? I'll have to dig in a bit deeper.