Android back button on a modal window close the APP

Ionic Framework ionic-v3
1

Hello all,

When i’m on a modal window and press the back button on an Android device, the APP close!

The correct behaviour should be to go back, to home at least.

To reproduce, i just started a new project with tabs template, and added a page for modal,

home.ts:

import { Component } from '@angular/core';
import { NavController, ModalController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public modalCtrl: ModalController) {

  }

  openModal() {
    let modal = this.modalCtrl.create('ModalPage');
    modal.present();
  }

}

in home.html

 <button ion-button (click)="openModal()">open modal</button>

in the modal page ts i don’t touch anything

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the ModalPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-modal',
  templateUrl: 'modal.html',
})
export class ModalPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ModalPage');
  }

}

the package.json

{
  "name": "modalPage",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/storage": "2.1.3",
    "cordova-plugin-device": "^1.1.4",
    "cordova-plugin-ionic-webview": "^1.1.16",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-whitelist": "^1.3.1",
    "ionic-angular": "3.9.2",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18",
    "cordova-android": "~7.0.0"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.6",
    "typescript": "2.4.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "ionic-plugin-keyboard": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {}
    },
    "platforms": [
      "android"
    ]
  }
}

Any idea? how to viewCtrl.dismiss() with back button only in the modal window?

Thank you

2

I’m doing same thing in my code. Try to add below function in modal page.

backButtonAction() {
    this.viewCtrl.dismiss();
}

Let me know if it is working.

3

Not working, app exits on modal too.

I’d tried with this, but no luck

ionViewDidLoad() {
    console.log('ionViewDidLoad ModalPage');
    this.platform.registerBackButtonAction(() => {
      this.viewCtrl.dismiss();
    });
  }

from: Ionic hardware back button just in tabs pages - #2 by Chal131313

4

I have same problem, isn’t it a bug?