Ionic-framework: Alert control is not dismissing after opening from the action sheet button event in Ionic3.5

[jkamboj]

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[ x] 3.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:
I have an action sheet into my project and opening an alert control by selecting the action sheet button. the alert box open but while clicking the alert button then alert control is not dismissing/closing itself. it always stays on the page.

Expected behavior:
The alert control should be dismissed/close after pressing the Agree/Disagree button.

Steps to reproduce:

1. add an action sheet into one of ionic page
2. add the alert control into that page.
3. open an alert control using action sheet button.
4. try to close the alert control using one of agree disagree button

Related code:

presentActionSheet() {
     let self = this;
    let actionSheet = this.actionSheetCtrl.create({
      title: 'Modify your album',
      buttons: [
        {
          text: 'Destructive',
          role: 'destructive',
          handler: () => {
            console.log('Destructive clicked');
            self.showConfirm();
          }
        },{
          text: 'Archive',
          handler: () => {
            console.log('Archive clicked');
            self.showConfirm();
          }
        },{
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });
    actionSheet.present();
  }
showConfirm() {

    let confirm = this.alertCtrl.create({
      title: 'Use this lightsaber?',
      message: 'Do you agree to use this lightsaber to do good across the intergalactic galaxy?',
      buttons: [
        {
          text: 'Disagree',
          handler: () => {
            console.log('Disagree clicked');
            confirm.dismiss();
          }
        },
        {
          text: 'Agree',
          handler: () => {
            console.log('Agree clicked');
             confirm.dismiss();
          }
        }
      ]
    });
    confirm.present();
  }

https://drive.google.com/open?id=0B6aMbU1-vMowSVRvU0JQdk1SZ0U
https://drive.google.com/open?id=0B6aMbU1-vMowRjJQQ0M0R0JtUEU

Other information:

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

global packages:

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

local packages:

@ionic/app-scripts              : 1.3.12
@ionic/cli-plugin-cordova       : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms               : android 6.1.2 browser 4.1.0 ios 4.1.1
Ionic Framework                 : ionic-angular 3.5.0

System:

Node       : v7.0.0
OS         : macOS Sierra
Xcode      : Xcode 8.3.1 Build version 8E1000a 
ios-deploy : 1.9.1 
ios-sim    : 5.0.10 
npm        : 4.6.1

[BrunoFDeveloper]

I have the same issue

[carlosjtacon]

Same issue here! I was getting crazy.

[NeoLSN]

I also have the same issue.

App directly opens an alert. => It's OK.
App opens an action sheet then opens an alert from action sheet. => It's broken.

And there is no error message, so we don't know what happened in here.

[jgw96]

Thanks for using Ionic, we will look into this.

[Pfvc298]

Hello,
I have the same issue too.
I found a way around it while waiting for a fix: wrapping the code that launches the alert in the actionsheet with a timeout:

presentActionSheet() {
    let actionSheet = this.actionSheetCtrl.create({
      title: 'Edit',
      buttons: [
        {
          text: 'Rename',
          handler: () => {
           setTimeout(() => {
             this.showRename();
           }, 400)
          }
        }
      ]
    });
    actionSheet.present();
}

showRename() {
    let prompt = this.alertCtrl.create({
      title: 'Rename',
      message: "Enter a name",
      inputs: [
        {
          name: 'Name',
          placeholder: ''
        },
      ],
      buttons: [
        {
          text: 'Cancel',
          handler: data => {
            console.log('Cancel clicked');
          }
        },
        {
          text: 'Save',
          handler: data => {
              console.log('Saved clicked');
          }
        }
      ]
    });
    prompt.present();
}

Maybe it will help to fix the issue :)

[VictorAssis]

The same happens to me when I call an alert from within another, but the @Pfvc298 solution does not work in my case. My code is:

    addPlayer () {
        let prompt = this.alertCtrl.create({
            title: 'Adicionar Jogador',
            message: "Insira o nome do novo jogador",
            inputs: [
                {
                    name: 'name',
                    placeholder: 'Nome'
                },
            ],
            buttons: [
                {
                    text: 'Cancelar',
                    handler: data => {
                    }
                },
                {
                    text: 'Adicionar',
                    handler: data => {
                        if (data.name == "")
                            setTimeout(() => {
                                this.showAlert('Nome vazio','Por favor, preencha o campo de nome.');
                            }, 1000);
                        else {
                            this.players.push({
                                name: data.name,
                                amount: 0
                            });
                            this.showAlert('Sucesso!','Jogador adicionado.');
                        }
                    }
                }
            ]
        });
        prompt.present();
    }
    showAlert(title, subTitle) {
        let alert = this.alertCtrl.create({
            title: title,
            subTitle: subTitle,
            buttons: ['OK']
        });
        alert.present();
    }

If i call the function showAlert directly works fine.

[diazenal]

I have the same issue. but I found solution
https://ionicframework.com/docs/api/components/action-sheet/ActionSheetController/

in handler of actionSheet,

actionSheet.dismiss().then(()=>{
this.showAlert();
});

return false;

[giovannipds]

Suffering with the same. As mentioned by @Pfvc298, a timeout "solved" it temporarily to me.

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

@Component({
  selector: 'page-test',
  templateUrl: 'test.html'
})

export class TestPage {

  constructor(
    public actionSheetCtrl: ActionSheetController,
    public alertCtrl: AlertController
  ) { }

  presentActionSheet() {
    let actionSheet = this.actionSheetCtrl.create({
      title: 'Test ActionSheet',
      buttons: [
        {
          text: 'Show Alert',
          handler: () => {
            // a timeout "solves"
            setTimeout(() => {
              this.showAlert();
            }, 0);
          }
        }
      ]
    });
    actionSheet.present();
  }

  showAlert() {
    let alert = this.alertCtrl.create({
      title: 'Test Alert',
      message: 'Lorem ipsum dolor sit amet.',
      buttons: ['Ok']
    });
    alert.present();
  }

}

[hennychen]

i have same

[renjithspace]

Try it out guys. It will work

let action = this.actionSheetCtrl
  .create({
    title: 'Dismiss in handler',
    buttons: [{
      text: 'Ok',
      handler: () => {
        action.dismiss()
        return false // The king is here
      }
    }]
  })

action.present()

[ionitron-bot[bot]]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot[bot]]

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