vue-final / vue-final-modal

🍕Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.
https://vue-final-modal.org
MIT License
931 stars 99 forks source link

close and destroy issue vue-final-modal v4 #450

Open odion-cloud opened 3 months ago

odion-cloud commented 3 months ago

Version

vue-final-modal: "^4.5.4" vue: ^3.4.35

OS

Windows 10

Reproduction Link

i have this issue when i ctry to close the modal it returns error on click closeModal my Modal.js code

import { defineAsyncComponent } from 'vue';
import { VueFinalModal, useModal, useModalSlot } from 'vue-final-modal';

export const useModalManager = () => {
  const openModal = async (componentPath, props = {}) => {
    // Dynamically import the component
    const component = defineAsyncComponent(() => import(`../views/viewmyntebot/partials/${componentPath}.vue`));

    // Create a modal instance
    const { open, close, destroy, options, patchOptions } = useModal({
      component: VueFinalModal,
      attrs: {
        clickToClose: true,
        escToClose: true,
        ...props
      },
      slots: {
        default: useModalSlot({
          component,
          attrs: props
        })
      }
    });

    // Open the modal
    open().then(() => {
      console.log('Modal opened');
    });

    // Optionally, return the modal instance if you need to manage it further
    return { open, close, destroy, options, patchOptions };
  };

  const closeModal = (name) => {
    try {
      const { close, destroy } = useModal();

      if (name) {
        close(name).then(() => {
          console.log('Modal closed');
        });
      } else {
        destroy(); // Optionally handle closing all modals or specific logic
      }
    } catch (error) {
      console.error('Error closing modal:', error);
    }
  };

  return { openModal, closeModal };
};"

Steps to reproduce

on click clodeModal

app.js:19867 Error closing modal: 
TypeError: Cannot destructure property 'component' of 'e' as it is undefined.
    at Le (app.js:36633:22)
    at Go (app.js:36652:8)
    at Proxy.closeModal (app.js:19856:81)
    at onClick._cache.<computed>._cache.<computed> (

What is Expected?

when i click closeModal it should close th modal