How to retain functionality of X/Close button of shadcn Dialog when using the "open" prop of <Dialog> element?

Question

X/Close button of shadcn Dialog does not work if I use "open" prop of element.

I don't see in shadcn or radix docs an event handler for the default X/close button (the one in top right).

I need to use the open prop to close the Dialog after an async operation has completed.

Answer 1

You need to pass setOpen to onOpenChange prop

e.g.

const [open, setOpen] = useState(false);

return <Dialog open={open} onOpenChange={setOpen} />

P.S This will also allow users to click outside the dialog to close it which may or may not be the wanted behavior