New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[v4.0.0-beta.15] ion-back-button is not removing previous page/component #16244

Open
almothafar opened this Issue Nov 6, 2018 · 2 comments

Comments

Projects
None yet
3 participants
@almothafar

almothafar commented Nov 6, 2018

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 (cordova-lib@8.1.1)
   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.

@ionitron-bot ionitron-bot bot added the triage label Nov 6, 2018

@almothafar almothafar changed the title from [v4.0.0-beta.15] ion-back-button is not removing previews component to [v4.0.0-beta.15] ion-back-button is not removing previous page/component Nov 6, 2018

@vincentdieltiens

This comment has been minimized.

vincentdieltiens commented Nov 7, 2018

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

This comment has been minimized.

CooleyGit commented Nov 7, 2018

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment