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