[v3][UModal] Modal programatically opened using useModal are not reseting its state after close

[hamonCordova]

Environment

---

• Operating System: Windows_NT
• Node Version: v18.20.5
• Nuxt Version: 3.14.1592
• CLI Version: 3.15.0
• Nitro Version: 2.10.4
• Package Manager: [email protected]
• Builder: -
• User Config: default
• Runtime Modules: [email protected], @nuxt/[email protected]
• Build Modules: -

---

Is this bug related to Nuxt or Vue?

Nuxt

Version

^3.0.0-alpha.9

Reproduction

https://ui3.nuxt.dev/components/modal#programmatic-usage

Description

Modal opened using useModal are not reseting its state after close

Additional context

No response

Logs

[clopezpro]

Exactly I had to use something like this. I think it is the action of the close button that is added by default that does not change the state of v-model:open

[benjamincanac]

@noook Any hint on this?

[clopezpro]

I’ve been testing this, and if we want to use a modal with useModal, we can’t do something like this:

This is because useModal exports a reactive variable isOpen that globally controls the currently opened modal.

so it is working as it should
https://github.com/user-attachments/assets/3e7fcd97-a92a-4de5-b93e-ce672738c414

[ghost]

using modal.isOpen.value or modal.close() programmatically does not trigger the update:open event in my testing

[dustin-we]

I am having the same issue. Opening a modal with:

const bookingModal = useModal();

bookingModal.open(ModalNewBooking, {
    context: ...
    onSuccess: ...
});

In v2, clicking outside the modal would reset it's state. When opening the modal again, the setup function would re-run.

In v3, the setup function is not re-run, resulting in, e.g., the modal's form being filled with data from the previous modal's form.

A workaround is closing the modal via useModal().reset() from inside or outside the modal component itself. But then, the modal cannot be dismissible, because clicking outside of the modal won't trigger the reset, so you need to use 'your own' close-button.

Example:

<UModal
    title="test"
    :dismissible="false"
>
    <template #close>
        <UButton @click="useModal().reset()">Close</UButton>
      </template>
...
</UModal>

[xergic]

My workaround is this:

watch(modal.isOpen, (value) => {
  if (!value) {
    modal.reset()
  }
})