ion-back-button does not work correctly with canDeactivate guard

Question

My Ionic 5 application has the following 3 pages with the navigation path

HomePage -> UserPage (with canDeactivate guard) -> SharePage

UserPage canDeactivate method:

  canDeactivate() {
        const alert = await this.alertCtrl.create({
        message: 'Do you want to go back?',
        buttons: [
          {
            text: 'No',
            role: 'cancel',
            handler: () => { }
          },
          {
            text: 'Yes',
            handler: () => { }
          }
        ]
      });
      await alert.present();
      let data = await alert.onDidDismiss();
      if (data.role == 'cancel') {
        return false;
      } else {
        return true;
      }
  }

In UserPage, on the back button when I choose 'Yes' it works fine and takes me back to HomePage.

When I choose 'No', the canDeactivate method returns false and UserPage remains open.
Then I click on the Share button to navigate to SharePage. The share page becomes the root page and it does not have the back button

In number 1), what should happen if you press no? And for stage 2), it depends on canActivate, since sharePage is not being the root, but inside userPage, the rule in canActivate is forcing sharepage to not go back to it, so you need to check the canActivate rule of userpage. — Mostafa Harb, Jun 29 '20 at 13:59
@MostafaHarb, 1) As you see in the code when I press 'No' the method canDeactivate returns false. So the page remains open. 2) The are no canActivate method here. — Tapas Mukherjee, Jun 30 '20 at 15:36
@AndreiGătej, I am not getting any option for Ionic4 or Ionic5 projects in stackblitz. Its only Ionic3 — Tapas Mukherjee, Jun 30 '20 at 15:38
@TapasMukherjee userPage doesn't have a guard? If so it is causing what i said. — Mostafa Harb, Jun 30 '20 at 17:39

ion-back-button does not work correctly with canDeactivate guard

0 Answers0