How do I close the dialog on link clicks?

[Chinomso1995]

I have a dialog that I am using to imitate a drawer menu. How do I close the dialog when one of the links in the menu has been clicked?

[sampl]

If you can’t use Dialog.Close, probably control the open state on the dialog parent and toggle it manually?

1. Create a state in the parent: const [drawerIsOpen, setDrawerIsOpen] = useState(false)
2. Use the state to control the Dialog open status, ie <Dialog.Root open={drawerIsOpen}>…</Dialog.Root>
3. Pass setDrawerIsOpen to the child Dialog component
4. When a link is clicked, run setDrawerIsOpen(false) from the child

[djalmaaraujo]

@sampl Did you test if this option will make the focus to be back to the trigger element? This would be an accessibility problem. I will test it and let you know.

[djalmaaraujo]

So the example works, https://codesandbox.io/s/crimson-frost-6gb2zi?file=/App.js. But if you go one way, you can no longer use DialogClose. If you see the example above, the Save Changes no longer works, but the new button works.

Also, the ESC key stops working.

[benoitgrelard]

That's because you forgot to wire onOpenChange={setIsOpen} so you're not syncing the internal changes with your state anymore.

[djalmaaraujo]

@benoitgrelard Thank you for the answer. I can confirm this works as expected. Thank you so much.

[benoitgrelard]

Hi @Chinomso1995,

• You could make your links <Dialog.Close asChild> so they inherit the close behaviour
• You could control the dialog (as per @sampl suggestion) and close when a link is activated
• If you have client side routing, then probably what you'd want would be to actually tie that in with your rooter events, so you'd control the dialog and then hook into router events and setOpen(false).