onOpenChange callback only fires on close in Radix dialog

[ehsaneona]

Hi, I'm facing an issue with the onOpenChange callback in the Dialog component from Radix UI. I’m managing the open state manually (without using the Trigger component), and the onOpenChange callback only fires when the dialog closes (false). It doesn't fire when the dialog opens (true).

Here's the code I’m working with:

<Dialog.Root open={isOpen} onOpenChange={handleOpenChange}> <Dialog.Portal> <Dialog.Overlay /> <Dialog.Content> <Dialog.Title>My Dialog</Dialog.Title> <Dialog.Close>Close</Dialog.Close> </Dialog.Content> </Dialog.Portal> <button onClick={() => setIsOpen(true)}>Open Dialog</button> </Dialog.Root>

[MaximKondratev]

Same problem here. onOpenChange seems to be fired only if internal state is changed but never if controlled state is.

I made this sandbox to check it and dialog calls onOpenChange only if I interact with Dialog.Close or with overlay. Opening dialog with "edit profile" and closing it with "save changes" does not fire onOpenChange (because it is not a Dialog.Trigger and not a Dialog.Close respectively, but just buttons with onClick)

I can see why this is done this way, but it creates problems too.

Just for context: I came here because this behavior breaks Vaul's nested drawers animation for controlled drawers where it depends on onOpenChange being called. Here is my issue about it.

[Oskii2311]

I have the same problem using version 1.1.6. Have you found any workaround?

[ehsaneona]

I read in the radix ui documentation that it seems to be intentional and is because we have access to state outside the component.