Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already report this problem, without success.
Ionic Framework Version
- v4.x
- v5.x
- v6.x
- Nightly
Current Behavior
Dismissing a controller modal does not trigger onUnmounted Vue lifecycle hook on the inner component. In my case there is init/deinit logic that occurs in modal inner component lifecycle hooks which isn't running as expected.
In reproduction repo you will notice opening a message mounts the first message, but subsequent modal presentations use the first component with its initalized data as opposed to remounting and reinitializing.
Expected Behavior
As described in ion-modal docs, controller modals should not persist the inner component across presentations. The inner component should unmount when the modal is dismissed.
Steps to Reproduce
- Present component in modal and dismiss modal.
- Present modal again with the same component and different componentProps
- Initial values from first modal presentation persist
Note the componentProps update as expected, however any initialization that occurs in setup script
or lifecycle hooks fails to run.
Code Reproduction URL
https://github.com/a-Leong/vue-modal-behavior
Ionic Info
Ionic:
Ionic CLI : 6.20.6 (/Users/****/.nvm/versions/node/v16.15.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 6.5.0
Capacitor:
Capacitor CLI : 4.6.2
@capacitor/android : not installed
@capacitor/core : 4.6.2
@capacitor/ios : not installed
Utility:
cordova-res : not installed globally
native-run : 1.7.1
System:
NodeJS : v16.15.0 (/Users/****/.nvm/versions/node/v16.15.0/bin/node)
npm : 9.1.2
OS : macOS
Additional Information
It's not clear to me whether this is expected behavior, however it contradicts my expectations based on the controller modal documentation. Is there a way to force the inner component to unmount on modal dismiss?