bug(nav): lifecycle events inside ion-nav fire incorrectly

[DwieDima]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

I've come across with some strange behaviour, when you present a page using ModalControllerwhich wraps ion-nav.

Parent Page

  public async openModal() {
    const modal = await this.modalController.create({
      component: ModalOutletPage,
      componentProps: { component: AddCardPage },
    });

    await modal.present();
  }

Modal Outlet Page

export class ModalOutletPage implements OnInit {
  @Input() public component: HTMLElement;
  @Input() public componentProps: unknown;
}

<ion-nav [root]="component" [rootParams]="componentProps"></ion-nav>

in this test i console.log() ionViewDidEnter(), ionViewDidLeave(), ngOnInit(), ngOnDestroy() inside add-card.page.ts

First time opening modal:

on open

1. ionViewDidEnter trigger

on close

1. ngOnInit trigger
2. ngOnDestroy trigger

second time opening modal:

on open

1. ngOnInit trigger
2. ionViewDidEnter trigger twice
3. ionViewDidLeave trigger
4. ngOnDestroy trigger

on close

1. ngOnInit trigger
2. ngOnDestroy trigger

https://user-images.githubusercontent.com/26873275/180785472-225256f1-c1d7-4e4c-a752-b37317ac55e9.mov

UPDATE

This is the behaviour, if i remove changeDetection: ChangeDetectionStrategy.OnPush inside modal-outlet.page.ts:

https://user-images.githubusercontent.com/26873275/180788325-724afcbb-c291-46ff-9a41-956a099e40fb.mov

Expected Behavior

Lifecycle events should trigger correctly

Steps to Reproduce

see video

Code Reproduction URL

https://github.com/DwieDima/ion-nav-lifecycle-bug

Ionic Info

Ionic CLI : 5.4.16 Ionic Framework : @ionic/angular 6.1.15 @angular-devkit/build-angular : 14.1.0 @angular-devkit/schematics : 13.2.6 @angular/cli : 14.1.0 @ionic/angular-toolkit : 6.1.0

Utility:

cordova-res : not installed native-run : not installed

System:

NodeJS : v16.14.2 npm : 8.5.0 OS : macOS Monterey

Additional Information

maybe related to #25638

[sean-perkins]

@DwieDima thanks for this issue. I've confirmed that the PR you have tag as being related, does not have an impact on this behavior.

We will log this as a bug and prioritize in the backlog. Thanks!

[akram-pi]

The issue exists on V5.x as well

[akram-pi]

@DwieDima @sean-perkins I was able to fix the bug with this code:

export class ModalOutletPage implements OnInit {
  @Input() public component: HTMLElement;
  @Input() public componentProps: unknown;
  
  isModalInitialized: boolean = false;

  constructor() {
    this.fixModalLifecycle();
  }

  private fixModalLifecycle() {
    setTimeout(() => {
      this.isModalInitialized = true;
    }, 50);
  }
}

<ion-nav  *ngIf="isModalInitialized" [root]="component" [rootParams]="componentProps"></ion-nav>

BTW, smaller timeouts works!

[EinfachHans]

just came across the same... Please fix 😃

[rdlabo]

Thanks for solution. Can be used requestAnimationFrame.

private fixModalLifecycle() {
  requestAnimationFrame(() => this.isModalInitialized = true);
}

[Coder7777]

so, has it fixed?

[sean-perkins]

@Coder7777 open issues are still open/not resolved. You can try one of the workarounds mentioned in this thread in the interim.

[Coder7777]

@Coder7777 open issues are still open/not resolved. You can try one of the workarounds mentioned in this thread in the interim.

I tried it, it can solve this bug temporarily.

thanks @rdlabo @akram-pi @DwieDima @sean-perkins