Manually controlling Dialog's closing functionality

[aj-norman]

Hi,

I apologise for the title if it makes no sense.

I'm trying to control the triggering of multiple dialogs, although I am able to do this, some of the default functionality does not seem to work.

For context, I have a dialog to confirm a users password, and a dialog to setup 2FA (using Laravel Fortify). Both dialog are in their own Vue components as the Confirm password modal is a shared component. Both components expose some functions.

When a user clicks the DialogTrigger within the TwoFactor dialog to setup a 2FA, I first have to do a check if a password was confirmed recently for the user, if not, I trigger the ConfirmPassword dialog to open instead via an exposed function to manually set the ConfirmPassword dialog open state to true

However when I do this, I find that the default closing functionality such as the "X" button or the clicking the BG, and key binding don't close the modal, however adding a DialogTrigger to the ConfirmPassword restores these, but is not the functionality I want.

Are there event listeners within Reka UI I can use for closing the dialogs? I've read the documentation multiple times, and looked at the code as well, but I'm not seeing anything or either just not understanding the functionality, so any guidance would be much appreciated.

Many thanks in advance

[aj-norman]

Well... turns out, the state is updated - and this was a simple "sleep on it" solution.

I had simply forgotten a v-model on the in front of the :open prop. My code should have been

<DialogRoot v-model:open="showModal">
    // ...
</DialogRoot>

You live and you learn. Hope this helps others they are experiencing the same.