bug: Ion-Nav not removing pages from DOM on pop()

[Gorshtak]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:
When using ion-nav pop() method page persist in DOM

Expected behavior:

Page should be removed from DOM

Steps to reproduce:

First there should be ion-nav and ion-router-outlet on the same level for bug to be reproducible. Page that are loaded via router-outlet should also contain an instance of ion-nav and when using that instance for pushing and popping the pages are not getting destroyed or rather they stay in DOM with display: none.

Using the project provided below steps to reproduce are:

1. Click on header("Go to Second page") to open second ion-nav
2. Click on "PUSH"
3. Click on "POP"

Inspect html structure and you will see the child component is still in DOM even though we popped it.

Related code:
Here is the minimal structure needed for the bug to reproduce https://github.com/Gorshtak/bug-ion-nav

[liamdebeasi]

Thanks for the issue. I'm not quite sure why the presence of the second ion-nav is causing this issue, but it definitely seems like a bug.

[cathypark]

I got the same issue too. My @ionic/angular version is 5.3.5

[VsLitvinenko]

still not fixed, @ionic/angular ver is 5.5.0

[svrijsewijk]

Same issue, anyone got a workaround?

The pages in the second ion-nav don't get 'ion-page-hidden';

[svrijsewijk]

Not sure how helpful this is but it seems that disconnectedCallback() is called on the second ion-nav the moment it's instantiated.

nav.tsx disconnectedCallback

this sets this.destroyed to true. Which disables some crucial functions in the Nav instance:

nav.tsx cleanup this syncs the DOM

[cathypark]

@svrijsewijk I got same issue. Are you using nested ion-nav?

[svrijsewijk]

@cathypark I am using ion-nav nested inside an ion-tab. the experience is similar to Instagram.

[danishin]

We have the same issue and because of it cannot deploy new mobile app.
Could we have any update on this? @liamdebeasi
Our customers are loving the experience of ionic. Thank you always

[Yohandah]

this sets this.destroyed to true. Which disables some crucial functions in the Nav instance:

YES !!

I have the same issue which cause in some cases to have my IonNav with the attribute destroyed = true while it is not destroyed, so I cannot go back with .pop() even if .canGoBack() returns true ! Then it's in a weird state where many pages are still in the DOM

@liamdebeasi could you please look into this issue, this is causing huge issues in my app, thanks

[EslamNemr]

same with ionic vue

[EslamNemr]

i was able to solve this in ionic vue
the nav component return html element to framework delegate not vnode (component instance) which cause filtering the array of component instance not work and removing component instance

so the solution first modify removeviewfromdom function in framework delegate
https://github.com/ionic-team/ionic-framework/blob/main/packages/vue/src/framework-delegate.ts
const removeViewFromDom = (parent, child) => {

    if (parent.tagName == 'ION-NAV') {
        if (child.children[0]) {
            removeFn(child.children[0].__vnode.ref.i.parent.uid);
            return Promise.resolve();
        }
    } else {
        Component && removeFn(Component);
        return Promise.resolve();
    }

};

and modify removeview function in ionic nav component in vue
https://github.com/ionic-team/ionic-framework/blob/main/packages/vue/src/components/IonNav.ts

    const removeView = (component) => views.value = views.value.filter(cmp => cmp.children[0].component.uid !== component);

now the array compare the uid between components instance and if exist it will remove it and destroy component instance and remove dom element.

[sean-perkins]

Hello everyone 👋 this has been resolved in 6.2.0. Please let me know if you run into any issues.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.