Programmatically Close Dialog

[ColeMiller21]

I have a dialog that will save changes - but I want it to close if the submit method is called successfully and unsure on how to accomplish this?

[joaom00]

To control the Dialog you can do this

const [open, setOpen] = React.useState(false)

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

[ColeMiller21]

Thank you very much for the quick response!

[hamzabenarfa]

thnx

[ChibuzoEkwue]

Thanks

[Inaam-Ur-Rehman]

you can use react useRef hook.

const ref = React.useRef();
Then in DialogTrigger:
<DialogTrigger ref={ref}>
Next, you can add this from where you want to close this dialog.
ref.current?.click();

[Psionyc]

This is the code I use to dismiss my dialog. I put it into a hook to makes things easier. It only works on client

import React from 'react'

const useDismissModal = () => {
    const dismiss = () => (document.querySelector('[data-state="open"]') as HTMLDivElement).click()
    return {
        dismiss
    }
}

export default useDismissModal