Adding App.addListener('backButton', callback) does not allow cancelling default back navigation (for android hardware back button)

[jimbarrett33]

Bug Report

When trying to override the back button behavior for certain routes in an Ionic Angular app with Capacitor, the Capacitor App App.addListener('backButton', callback) => doesn't override the back button so the user still navigates to the route.

This seems to occur in certain configurations and some it does not. For example, if I use the Ionic starter app "Build your first app" Photo taking app then the App.addListener('backButton', callback) => works correctly and allows blocking the back button for certain routes. However, I have another app that uses the same code and it doesn't prevent going back.

I believe it has to do with the built-in Ionic back button behavior and the order of it's listener and the listener added with App.addListener('backButton', callback) =>.

In my app, I am able to get it working by "manually" turning off the Ionic hardware button using config with IonicModule.forRoot({ hardwareBackButton: false }) following this Ionic Config docs. But I am confused why I have to manually do this in my app but not in the Ionic starter app.

I have 2 asks for this bug:

1. please indicate best practice when using Capacitor and Ionic with the back button. The addListener('backButton', ...) documentation mentions nothing about using ionic module configuration to enable taking over the backButton behavior and the Ionic Documentation for Angular says to use a different API this.platform.backButton.subscribeWithPriority(10, () =>

In the current versions of Ionic and Capacitor, which method should be used?

2. indicate in the addListener('backButton', ...) documentation that sometimes you may need to disable the Ionic default handler with IonicModule.forRoot({ hardwareBackButton: false })

reference: (ionic-team/capacitor#2220 (comment))

Plugin(s)

App

Capacitor Version

    "@capacitor/android": "^6.0.0",
    "@capacitor/app": "^6.0.0",

Platform(s)

Ionic
Angular
Capacitor
Android

Current Behavior

In some cases the below code will not block the hardware back button from navigating back

App.addListener('backButton', () => {
      if (this.checkRouteCanBack(this.currentRoute)) {
        console.log('Back button prevented on:', this.currentRoute);
      } else {
        window.history.back(); // Default behavior: Go back
      }
});

Expected Behavior

The above code will prevent back navigation for certain routes.