AlertController Cancel Button / Dismiss is not working

Ionic Framework ionic-v3
1

Hi:

AlertController Cancel Button / Dismiss is not working, with ionic v3.4.0

What to do?

2

Show us the code that is not working.
Also post your ionic info output please.

3 
import { AlertController } from 'ionic-angular';

.....


  constructor(
...
    public alertCtrl: AlertController,
....
) {}

  deletePerson(mortgage) {
    let confirm = this.alertCtrl.create({
      title: 'Delete Person',
      message: 'Are you sure?',
      buttons: [
        {
          text: 'No',
          role: 'cancel'
        },
        {
          text: 'yws',
          handler: () => {
          }
        }
      ]
    });

    confirm.present();
  }
4

global packages:

@ionic/cli-utils : 1.4.0
Cordova CLI      : 6.4.0
Ionic CLI        : 3.4.0

local packages:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms               : android 6.0.0
Ionic Framework                 : ionic-angular 3.5.0

System:

Node       : v7.3.0
OS         : Windows 10
Xcode      : not installed
ios-deploy : not installed
ios-sim    : not installed
npm        : 3.8.5
6

I think the problem lies outside of what you have given us. I paste your deletePerson() method verbatim and add a button to trigger it, and I get an alert as expected. Clicking either the “NO” button or the backdrop dismisses the alert, also as expected.

7

I activate the function from ActionSheetController button.

      buttons = [
        {
          text: 'DeletePerson',
          handler: () => {
            this.deletePerson(person);
          }
        }
];

    let personActions = this.actionSheetCtrl.create({
      title: "Person Actions",
      buttons: buttons
    });

    personActions.present();
8

Could pleas e check how the button activates from actionController

9

Can you please provide a complete reproducible example instead of dribbling bits out?

1 Like
10 
import { Component } from '@angular/core';
import { NavController, ActionSheetController, AlertController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  person:any = {
	name: ""
  };
  
  constructor(
	public navCtrl: NavController,
    public actionSheetCtrl: ActionSheetController,
    public alertCtrl: AlertController
  ) {}
  
  DoAction() {
    let buttons:any = null;

	buttons = [
		{
		  text: 'Change Name',
		  icon: 'create',
		  handler: () => {
			this.changeName();
		  }
		}
	];
    

    let actions = this.actionSheetCtrl.create({
      title: 'Actions',
      buttons: buttons
    });

    actions.present();
  }
  
  changeName() {
    let prompt = this.alertCtrl.create({
      title: 'Change Name',
      message: "Insert new name",
      inputs: [
        {
          name: 'personName',
          placeholder: 'new name'
        }
      ],
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel'
        },
        {
          text: 'OK',
          handler: data => {
            this.person.name = data.personName.length ? data.personName : "No Name";
          }
        }
      ]
    });

    prompt.present();
  }
  
}

and html:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button secondary (click)="DoAction()">Click me</button>
</ion-content>
11

The code above is a new sideMenu project that has only a button in it and it rproduces the bug

12

I had the same problem. This article helped me: https://github.com/ionic-team/ionic/issues/7861#issuecomment-242771763
The problem is that we have more than one dialog at the same time.

1 Like
13

The problem is that we have more than one dialog at the same time.

Yes, That was the issue for me too. Thanks!