Ionic-framework: [v4.0.0-beta.15] ion-back-button is not removing previous page/component

[almothafar]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)             : 4.3.1 (C:\Users\almothafar\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.15
   @angular-devkit/build-angular : 0.10.4
   @angular-devkit/schematics    : 7.0.4
   @angular/cli                  : 7.0.4
   @ionic/angular-toolkit        : not installed

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : not available
   Cordova Plugins       : not available

System:

   Android SDK Tools : 26.1.1 (D:\Android\sdk)
   NodeJS            : v11.1.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.4.1
   OS                : Windows 10

Describe the Bug
When I go to another page using a route and inside that page, I got ion-back-button, when I click it, it does show me the previous page but nothing is clickable, I viewed the elements and showed me that I still got the previous page as an overlay for the current page.

Steps to Reproduce
Steps to reproduce the behavior:

1. Fork https://github.com/ionic-team/ionic-conference-app and make sure you updated ionic to 4.0.0-beta.15
2. Run the application and go to session details
3. You click the back button and try to go to other details, you can see the page no more clickable,

Related Code
I got my application based on Ionic Conference App, so it should be reproducible using it.

<ion-header>
  <ion-toolbar color="dark">
    <ion-buttons slot="start">
      <ion-back-button text="Back" defaultHref="/app/tabs/(result:result)"></ion-back-button>
    </ion-buttons>
    <ion-title color="primary">Report</ion-title>
  </ion-toolbar>

  <ion-toolbar color="dark">
    <ion-buttons slot="end">
      <ion-button (click)="presentExportFile($event)" color="light">
        <ion-label>Files</ion-label>
        <ion-icon name="arrow-dropdown"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

Expected Behavior
It should work!

Additional Context
When I fall back to version v4.0.0-beta.13, the issue is gone, so it is clearly something happened in beta 15.

[vincentdieltiens]

I have the same behavior in my app using router.navigateByUrl

The "previous" page/component element is not removed at the end of the "exit" animation. The previous page is not visible (because opacity to 0) but still receives events because the element node is above the element node of the new page.

In the following case, the app-logout page redirects to app-login page, but I can't sign again because the app-logout catches all the events.

<app-logout _nghost-c5="" class="ion-page" style="z-index: 100; opacity: 0; transform: translateY(40px);">
    <!-- some content -->
</app-logout>
<app-login _nghost-c2="" class="ion-page" style="z-index: 99;">
    <!-- some content -->
</app-login>

[CooleyGit]

Seeing the same issue here only seems to happen when navigating back to a virtual scroll page. I can see the old page component in dev tools sitting over the current page blocking any actions. If I switch my list to ngFor I don't seem to see this issue, unfortunately, my dataset is too large for ngFor... Is there any workaround for this or is basic navigation just broken in Beta 15?

[morrisonbrett]

Still seeing this in @ionic/angular 4.0.1.

[traziusbiztest]

Same in ionic 4.1.0

[liamdebeasi]

Hey there,

Can you give this a try using the latest nightly build of Ionic? npm i @ionic/angular@dev. There have been several routing fixes created over the past week or so.

Let me know if you are still running into issues after updating.

Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. 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.

Thank you for using Ionic!