page transition animation starts before ionViewWillLeave when using swipe to go back

[martijnlutgens]

Bug Report

Ionic version:

[x] 4.0.1

Current behavior:

In 4.0.1. ionViewWillLeave does trigger, but is too late when using swipe to go back. In Ionic 3 ionViewWillLeave will trigger before the page transition animation. Now in Ionic 4 it is triggered after the page transition is started. So the user can drag away the current page and then it will stay that way (leaving translateX at 100%). I am using this in conjunction with a CanDeactivateGuard to prevent a user from leaving a page that is being edited.

Expected behavior:

When you block the possibility to leave a page on ionViewWillLeave (with a CanDeactivateGuard) and a user swipes to go back, the page transition should not have started, because then the user is still able to swipe away the page.

Steps to reproduce:

Create a component that uses CanDeactivateGuard like in the related code. When canLeave is false and you swipe to go back you are still able swipe the page away while the alert is open.

Related code:

this.canLeave is a boolean indicating the user may not leave:

ionViewWillLeave(){
    return this.canDeactivate();
  }

async canDeactivate() {
    if (!this.canLeave) {
      const alert = await this.alertController.create({
        header: 'Annuleren?',
        message: `Weet je zeker dat je annuleren? Alle wijzigingen gaan hiermee verloren`,
        buttons: [{
          text: 'Nee'
        },
        {
          text: 'Ja',
          handler: () => {
            this.canLeave = true;
            this.historyBack();
          }
        }]
      });
      await alert.present();
    }
    return this.canLeave;
  }

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.6.0 (/Users/martijnlutgens/.nvm/versions/node/v8.12.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.1
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.0

Cordova:

   cordova (Cordova CLI) : 6.5.0
   Cordova Platforms     : android 7.0.0, ios 4.3.1
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.0.2, (and 6 other plugins)

System:

   ios-deploy : 1.9.2
   NodeJS     : v8.12.0 (/Users/martijnlutgens/.nvm/versions/node/v8.12.0/bin/node)
   npm        : 6.4.1
   OS         : macOS Mojave
   Xcode      : Xcode 10.1 Build version 10B61

[liamdebeasi]

Hi there,

Thanks for opening an issue with us! Would you be able to provide a repository with the code required to reproduce this issue?

Thanks!

[martijnlutgens]

I just made an example based on the ionic 4 blank template. The repository is: https://github.com/martijnlutgens/ionic4-swipe-ionviewwillleave.

[jkronborg]

I kindly vote for this bug to be prioritized higher. We had to disable the swipe-to-go-back gesture in our iOS app since this bug breaks the app when you hit it. The app feels significantly less like an iOS app when you can't swipe to go back :-(

[martijnlutgens]

I agree that it is a major issue since STGB is the most common UX pattern on iOS. As a workaround I just disable STGB when needed for now like:
<ion-router-outlet main [swipeGesture]="!helperService.swipeGestureDisabled"></ion-router-outlet>
For now you might do the same to be able to use STGB, but I do hope that this wil be on deck soon.

[jkronborg]

Thanks for the idea. I don't think it's a good solution in general, as it's almost more jarring to have STGB not work in a few seemingly random places than having it disabled for the whole app.

[DaedalusAB]

This is a major issue. I too vote to up the priority on this one. :)

[MrRubi100]

I also agree that it is a major issue. This is kinda important for an IOS App.

[millionfriends]

I agree. This should be prioritized higher. It does not feel like a native iOS App with STGB disabled.

[Apro123]

This issue create more problems such as the one on #20092

[7freaks-otte]

Are there any news on this? This still happens in Ionic v5 🙁

[REPTILEHAUS]

Still happens in latest

[Monomachus]

Up

[1x2x3x4x]

Yes, still happens.

As for me, if it helps anyone, what I did on iOS if I wanted to NOT be able to swipe back is:
Simple case: from page1 I go to page2 and I don't want the user to be able to come back to page1 by swiping.

Page 1: this.router.navigate([/page2, swipeBackBoolValue]);
Page 2: in ionViewDidEnter, if swipeBackBoolValue is false (I don't want to swipe back) I do this.routerOutlet.swipeGesture = false;

You'll have to import the Router and routerOutlet.

This is just a workaroud because you'll have to do it on every page you want to disable the swipeBack, but it works.

[djkris105]

It still happens to me in version 6.0. The documentation on the website says:

ionViewWillLeave - Can be used for cleanup, like unsubscribing from observables. Since ngOnDestroy might not fire when you navigate from the current page, put your cleanup code here if you don't want it active while the screen is not in view.

But doing cleanup in this function will break any view when an user starts a swipe action and then cancels it.

[chriswep]

But doing cleanup in this function will break any view when an user starts a swipe action and then cancels it.

i have exactly this problem. @liamdebeasi what is the supposed way to deal with this? and specifically - since you merged #19894 into this issue - is there a way to detect a swipe-cancel to recover from a cleanup in ionViewWillLeave?

[dmoodz]

Is anyone else here able to replicate the actual UX of the page moving off to the right when using STGB? My transition is still fading from the top down when using STGB and it looks funky. I found an issue for ionic:react where they solved the transition, but not for angular.