ModalContainer doesn't remove modals when it is unmounted

matthew-dean commented 1 year ago

Version

vue-final-modal: 4.0.11 vue: 3.2.47 nuxt: n/a

OS

Mac

Reproduction Link

n/a

Steps to reproduce

This is easily reproducible with Storybook. What happens is that each story gets wrapped in a decorator that has a <ModalsContainer /> component. This means when you navigate to another story, even though the story is completely replaced / re-rendered, the previous ModalsContainer doesn't properly clean up after itself, leaving orphan modals in the iframe.

What is Expected?

A ModalsContainer should destroy all child modals when it is unmounted.

Workaround

You can work around this vue-final-modal bug by wrapping the ModalContainer in another .vue component, like so:

<script setup lang="ts">
import { onBeforeUnmount } from 'vue'
import { ModalsContainer, useVfm } from 'vue-final-modal'

const vfm = useVfm()

onBeforeUnmount(() => {
  vfm.closeAll()
})
</script>

<template>
  <ModalsContainer />
</template>

matthew-dean commented 1 year ago

Okay, I just found a bug on top of this bug -- I switched the SFC-style modal to a useModal version, and now the above workaround no longer works. I've even tried creating a vfm singleton and added that to useModal context and no dice. Now I get infinite stacks of modals in Storybook stories.

I've even tried this:

onBeforeUnmount(() => {
  modelInstance.destroy()
})

...this does not end up destroying the model instance when the component is un-mounted

hunterliu1003 commented 1 year ago

@matthew-dean I'm not familiar with storybook, can you provide a minimal reproduction?

vue-final / vue-final-modal