Skip to content

bug: dismissing controller modal doesn't unmount inner component #26665

Closed as not planned
@a-Leong

Description

@a-Leong

Prerequisites

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

  1. Present component in modal and dismiss modal.
  2. Present modal again with the same component and different componentProps
  3. 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?

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions