Opening/closing modals programmatically

[peterhijma]

Description

I've got two questions regarding opening/closing modals programmatically.

1

If I open a modal with a form using const modal = useModal(); modal.open(SomeModal) I can fill in some data in the form, then close the modal by clicking outside of the modal. Then if I open the modal again, the form is still filled with data. Should this be the case? What would be a good "workaround"?

2

If I close a modal using const modal = useModal(); modal.close(), there is no fade-out transition. It disappears immediately. Is this on purpose or is it a bug? Using this method, the first described problem is not occurring. Why is there a difference?

[gdschanu-peter]

1. Your form still retains its data due to the unclear reference when clicking outside. I'm almost certain that the Keep Alive feature is responsible for this. This feature is actually beneficial to the user experience as it saves time and prevents the need to refill the form.
2. I think you call direct function close in Modal so there is no transition at all

[ABDURRAHMANYIGIT]

In my scenario I use popup to show data coming from parent component. In this case, when I click outside, the old data is still shown even though I send another data because the popup is not onmounted. You can emit the outside click event and get both the transition animation and unmount the popup. But I think it shouldn't be this way. If the popup does not appear on the screen, it must be unmounted. Is there any reason to use keep alive here?

[IAMSDR]

You can use

const { isOpen } = useModal();
<button @click="isOpen = false" >close</button>

for fade-out transition while closing modal programmatically

[moshetanzer]

Hi @peterhijma,

Have you solved your issue with the above responses?

[genu]

Just to clarify, the current behavior of the useModal composable is to remove the dynamic component from the DOM altogether whenever modal.close() is called.

Having said that, this is either a bug on the side of useModal() or there is something else going on.

then close the modal by clicking outside of the modal.

Clicking outside of the modal doesn't trigger the close event on the composable, so this might be the issue. The composable doesn't know that you clicked outside of the modal.

As a workaround for now, you can try to use the https://vueuse.org/core/onClickOutside/ from vueuse to be able fire off an event to let the composable know you clicked outside.

@benjamincanac I think this can be marked as a feature request -- Add events to UModal to know when it opens and closes.

[peterhijma]

My problems seem to have been solved, thanks a lot all involved 🥳