Ionic-framework: bug(Nav): swipeBackEnabled and a Nav Guard break navigation

[DavidWiesner]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

1. Set swipeBackEnabled to true
2. Intercept the Nav in ionViewCanLeave with a Promise and an Alert
3. resolve the Promise doesn't close the current Page

Expected behavior:
resolve the Promise should close the current Page and go back to the previous.

Steps to reproduce:
To reproduce:

1. Open the plunkr http://plnkr.co/edit/61aXApNZjU8iUFLG3Vni?p=preview
2. tab on "go to next"
3. Try to swipe back from the new page
4. Click "Yes" on the alert to resolve the Promise an so go back to the start page
5. be :disappointed:

BTW: tab the back button in the header and than "yes" in the alert works as expected.

The relevant components in plnkr:

• app.component.ts with swipeBackEnabled set to true
• app/start.page.ts the root page
• app/next.page.ts the page where I intercept the Nav with a Promise in ionViewCanLeave and an Alert

Related code:
Here is the relevant part from next.page.ts that intercept the navigation.

  ionViewCanLeave() {
    return new Promise((resolve, reject) => {
      let alert = this.alertCtrl.create({
        title: 'Leave me?',
        subTitle: 'Press yes to try to leave me ;)',
        buttons: [
          {text: 'No', role: 'cancel',  handler: reject  },
          {text: 'Yes',  
            handler: () => {
              alert.dismiss().then(resolve);
            }
          }
        ]
      });
      alert.present();
    });
  }

Other information:
-

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.5.0 
Ionic Framework Version: 2.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.9
Node Version: v5.12.0
Xcode version: Not installed

[jgw96]

Thanks for opening an issue, we will take a look into this!

[andersfa87]

Any update or workaround on this?

[lucianosantana]

Workaround

I was also experiencing this issue and managed to workaround using the approach demonstrated on this Plunker.
Basically, instead of returning the promise from the alert controller to the nav guard. I deal with the nav guard with a simple boolean and then control the pop from the nav controller with an specific exit method.

I must say though that there is another issue (happening only on the plunker). The issue is that the swipe action only works once. Not sure why and not going to investigate this now. The point of this post is only to demonstrate that using the mentioned logic you can solve the issue of being blocked after the swipe.

[nvirth]

the swipe action only works once

Actually, this happen by us in production as well.

The subissue summarized:

There are these pages: A, B, C
B has the nav guard

A ---> B ---> C --swipe-back--> B --swipe-back--> DEATH

So it seems to me if you SwipeBack to a page with NavGuard, you can't SwipeBack from that page any furher.

[lucianosantana]

@nvirth I think you got my comment wrong.

When I say :

the swipe action only works once

I am referring to what happens on that video :
https://monosnap.com/file/Ey1VKD2z1bXLoa0JLQNZqo0NBuNiKO

You'll see that the swipe action works on the first time (it fires the NavGuard), on the second time it doesn't . I don't really understand why, but didn't do any deep investigation. But it is actually unrelated with the bug reported.

The bug reported is that :

resolve the Promise doesn't close the current Page

Therefore my proposed workaround:

Basically, instead of returning the promise from the alert controller to the nav guard. I deal with the nav guard with a simple boolean and then control the pop from the nav controller with an specific exit method.

Have you tried it ?

The key is on the plunkr I've made , on the file app/next.page.ts, the method ionViewCanLeave return a boolean directly instead of a Promise, as in the initial reporter's plunkr

[nvirth]

@lucianosantana Your workaround helped us, but I can't remember the final solution now, it was 1+ month ago

[lucianosantana]

@nvirth Glad it helped then ! :-)

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/182