Ionic-framework: Bug@Ionic 2 : nav.pop not work with ActionSheet and Alert

[SoaringTiger]

both ActionSheet and Alert handler not work with this.nav.pop()

constructor(nav: NavController) {
  this.nav = nav;
}

presentActionSheet() {
  let actionSheet = ActionSheet.create({
  title: 'Leave this page',
  buttons: [
    {
       text: 'Destructive',
       style: 'destructive',
       handler: () => {
           this.nav.pop() //pop not work here!
        }
   }, 
 {
     text: 'Cancel',
     style: 'cancel',
     handler: () => {
      console.log('Cancel clicked');
   }
  }
 ]
  });

  this.nav.present(actionSheet);
}

[kitkimwong]

+1
Have the same case that it can't use nav.push in actionsheet.
My solution is that use settimout to push in the button handler so that the actionsheet's animation has finished.

[mauricionarcizo]

+1
The same issue here.

[ghost]

+1

Same issue, this.nav.pop() doesn't work inside of an ActionSheet or Alert.

[kitkimwong]

One of the solution:

handler: () => { this.nav.rootNav.pop().then(() => { this.nav.rootNav.pop(); }); } }

https://github.com/driftyco/ionic/blob/2.0/ionic/components/nav/test/basic/index.ts#L172

Or just use settimout 400 - 600 ms something like that .

[ghost]

@kitkimwong Perfect that works great!

Plus, has anyone noticed that the ActionSheet with material design doesn't have colors? e.g. if you set the style to destructive it's still black not red like in iOS or in their docs!

[AdrianTeh]

this.nav.push() doesn't work as well within Alert handlers

[jgw96]

Hello everyone! Thanks for opening an issue with us! The answer for this is to use promises. Our navigation system returns promises for all the nav methods (push(), pop(), present(), dismiss() etc etc) so the proper way to use nav.push() with an alert would be like this:

this.alert.dismiss().then(() => {
    this.nav.push(myAwesomePage);
})

You can also check out this link and this link to read more about using promises with navigation in Ionic 2. Thanks for using Ionic!

[jgw96]

Also, @callodacity material design does not color "destructive" actions red, so thats why the destructive attribute does not color the buttons in the actionsheet red. Hope that clears it up for you!

[ghost]

@jgw96 Thank you very much - I don't have an Android Device so I just assumed! :)

[jgw96]

@callodacity No problem! Thanks for using Ionic!

[ghprod]

@jgw96 I've tried with then promise but still no luck :(

loading.dismiss().then(() => {
    this.nav.pop();
});

but this is work

loading.dismiss().then(() => {
    setTimeout(() => this.nav.pop(), 500);
});

[tejit2004]

Hi Is there any progress on the issue? I am working on 2.0.0-beta.10 and it seems it still not rectified.

Am i right?

[manucorporat]

@tejit2004 this should be fixed in next beta! we refactored the whole overlay system (alert, action sheet, modals) so it is not longer coupled with the navigation stack.

Please reopen this issue once the beta11 is released and you consider this issue was not fixed :)

[tejit2004]

Thanks, that will be handy.

Is there any timeframe when beta11 will be released? as I am ready with my app to release on the stores, this bug prevents me. Is nightly code available which i can use?

Anyway, Thanks and it's relieving that these are out of the navigation stacks.

[jgw96]

@tejit2004 There is a bleeding edge nightly of Ionic 2 available, which you can install with npm install ionic-angular@nightly but i would not recommend using it in a production app as it is a nightly and is not considered stable for the next release yet. You can be assured that we are working hard on getting the next release out, but we do not have a solid timeline on when it will be released. Thanks for using Ionic!

[kz]

Am I correct that this issue is also to do with Alert buttons not working after opening Alert in an ActionSheet in Beta 10? I managed to fix this issue by asynchronously dismissing the ActionSheet before creating the Alert, which seems to be the solution in this issue. Either way, in future versions, is the accepted practice to always dismiss the ActionSheet first before opening the Alert in the ActionSheet's handler, or should I leave it for Ionic to handle this and directly create an Alert under an ActionSheet handler (which caused this bug)?

[jgw96]

@kz with the overlay component refactor that is coming in beta.11 you will not have to always dismiss the actionsheet before opening an alert. Hope that answers you question!

[MankinPT]

Still having issues on pop (tested with LoadingController). Had to add a timeout value, that is not ideal.

Edit: Ok, been testing (including Ionic 2 source) and concluded that navController is a bit of a mess. Very vulnerable to racing conditions, including the dismiss() starting before present() finishes.

The way I found in order to avoid racing conditions is to only start your job after present() is finished:

 this.loginLoading = this.loadingController.create({
      content: this.translate.instant(key),
      dismissOnPageChange: true
    });

    this.loginLoading.onDidDismiss(()=> {
    });

    this.loginLoading.present().then(
          ()=>{
             do job
          }
   );

And pop() when dismiss() is finished (don't use onDidDismiss callback):

this.loginLoading.dismiss().then(
()=> { 
     nav.pop();
  }
)

Also, do not use duration option on Loading. It has the same problem as doing a navigation on onDidDismiss(). Use instead:

 successLoading.present().then(() => {
          setTimeout(() => this.navController.pop(), 3000);
        });

[saurabhvyas]

Here is a snippet of my code. I am stuck at this for 2 days, my alert never gets dismissed :(

` let alert = this.alertCtrl.create({
title:'Oops',
message: error.message,
buttons: [
{
text: "Ok",

          handler:()=>{

            console.log('handler called');

            alert.dismiss().catch((err)=>{
              console.log(err);

            }).then(()=>{


            })

             return false;

          }
        }
      ]
    });


    alert.present().catch((err)=>{
     console.log(err);

    });


  });`

[kamok]

BTW guys, you should probably reopen this. When I import AlertController into my constructor for a component, the NavController.pop breaks. I had to resort to this:

this.nav.pop().then(()=>{this.nav.pop()}) to pop my page off.

I did not even place my this.nav.pop() inside the AlertController. I simply imported it, place it in constructor, and none of my other NavController actions work.

[kpishere]

I resolved this issue by copying a class member reference to my NavController to the local function scope. snippet is below. local variable needed for some of the promise/callback magic that happens with javascript.

  openContactForm(recType) {
    let newRecFields = this.modalCtrl.create(AddContact, {recType});
    let localNav = this.navCtrl;
    newRecFields.onDidDismiss(data => {
      // Save the new record
      if(Object.keys(data).length > 0) {
        Meteor.call('axPutContact', this.id, data, function(error, result) {
          if(typeof error !== 'undefined') {
            alert(`Posting error '${error}'.`);
          } else {
            localNav.pop();
          }
        });
      }
     });
     newRecFields.present();
  }

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.