AlertController bug IONIC2

[jamalsleman]

IONIC 2 Short description of the problem: Bug on AlertController, when you have more than one AlertController, for example after pressing ok, you create new alert, on this case you cannot continue work with the Gui all buttons inputs unreachable.

Also with loading if you show loading and while loading you show alert then GUI stop working, i think the main div of the alert still on the top of the gui and cannot close it.

I try out setTimeout but sometime it still not work. also i try dismiss still have the problem.

Examples:

1. The user scan on input a bracode if it is not correct system show alert. if user scan several time then 2 alert will be sho and after that application stop working, GUI become white or unreachable.
2. Login page, i display oading if the password not correct i need to display alert, most of time it ok but some time system stop working, to solve that i don't use the alert and i show error msg at the Gui itself.
3. I display AlertController that include check boxes, after user click "ok" I need to display other msg, here when I use dismiss + setTimeout => 90% work ok, but sometime not work it depends on the duration of setTimeout.

Which Ionic Version? 1.x or 2.x 2.x beta 11.

[jgw96]

Hello, thanks for opening an issue with us! Would you mind posting a code snippet that i can use to reproduce this issue? Thanks for using Ionic!

[luchillo17]

Ok the alert one i was expecting it, it had that kind of issue for a while now, i've been dealing with it since aplha.25 or something like that, that's why they implemented Lifecycle hooks, as well as making the alerts return promises, to help developers avoid pitfalls with transitions breaking the app when opening more than one alert before the first one finishes transitioning.

However the second issue with Loading component is unexpected, i would suppose that the loading component has a higher tier of priority over Alerts and Modals, so i think it shouldn't break, instead i imagine a Loading component as being on top of all, so it shouldn't break with any Alert nor Modal being shown.

[jgw96]

@Luchillo thanks for the info. Once i see the code snippet i will be able to tell for sure, but if its the issue i think it is then it has actually already been fixed and will be in the beta.12 release. Just want to see the code snippet to make sure.

[ferminmoli]

I'm having the same issue on all alerts. Please, Is there any workaround to fix it?

[jgw96]

@ferminmoli would you mind posting a repo or code snippet i can use to reproduce this issue? Thanks!

[Mawi137]

I seem to have the same problem. I have an Alert that opens from an ActionSheet for which the buttons don't work. When opening the Alert from a button, it does work. The same with a Toast that shows from an Alert. It seems that the Alert remains on the screen, but with opacity set to 0. When clicking next to the invisible Alert, it is hidden.

Here's a snippet of the second case:

      newFriend(){
        let alert = this.alertCtrl.create({
        title: 'Add Friend',
        inputs: [
          {
            name: 'friendname',
            placeholder: 'Username or Email',
            value : ''
          }
        ],
        buttons: [
          {
            text: 'Cancel',
            role: 'cancel'
          },
          {
            text: 'Add',
            handler: formData => {
                if(formData.friendname == ""){
                    return false;
                }else{
                    this.friendsService.createFriendRequest(formData.friendname).subscribe(
                        data => {
                            if(data.hasOwnProperty("error_code")){
                                //Todo alert isn't hidden, should be fixed in beta 12
                                if(data.error_code == -1)
                                    this.presentToast("The user '"+formData.friendname+"' does not exists");
                                else if(data.error_code == -2)
                                    this.presentToast("Invalid arguments supplied");
                                else if(data.error_code == -3)
                                    this.presentToast("You can't add yourself as friend!");
                                else if(data.error_code == -4)
                                    this.presentToast("You're already friends with "+formData.friendname+"!");
                                else if(data.error_code == -5)
                                    this.presentToast("A friend request is already on its way to "+formData.friendname);
                            }else{
                                this.presentToast("A friend request was sent to "+formData.friendname);
                                this.loadFriends();
                            }
                        },
                        err => {this.presentToast("Something went wrong. Please try again later.");}
                    );
                }
            }
          }
        ]
      });
      alert.present();
    }

    presentToast(toastMessage) {
      let toast = this.toastCtrl.create({
        message: toastMessage,
        duration: 4000,
        position: 'bottom'
      });
      toast.present();
    }

[ferminmoli]

@jgw96 here is the repo: https://github.com/ferminmoli/Ionic-alert

[jgw96]

Hello @MartijnW49 , thanks for the code sample! The issue here is that you are not waiting on the alert to dismiss before presenting the toast. Because all of our navigation is async in Ionic 2 you must wait on one transition to finish before starting another. Here is an example of your code that should work.

newFriend(){
        let alert = this.alertCtrl.create({
        title: 'Add Friend',
        inputs: [
          {
            name: 'friendname',
            placeholder: 'Username or Email',
            value : ''
          }
        ],
        buttons: [
          {
            text: 'Cancel',
            role: 'cancel'
          },
          {
            text: 'Add',
            handler: formData => {
                if(formData.friendname == ""){
                    return false;
                }else{
                    this.friendsService.createFriendRequest(formData.friendname).subscribe(
                        data => {
                            alert.onDidDismiss(() => {
                                if(data.hasOwnProperty("error_code")){
                                //Todo alert isn't hidden, should be fixed in beta 12
                                if(data.error_code == -1)
                                    this.presentToast("The user '"+formData.friendname+"' does not exists");
                                else if(data.error_code == -2)
                                    this.presentToast("Invalid arguments supplied");
                                else if(data.error_code == -3)
                                    this.presentToast("You can't add yourself as friend!");
                                else if(data.error_code == -4)
                                    this.presentToast("You're already friends with "+formData.friendname+"!");
                                else if(data.error_code == -5)
                                    this.presentToast("A friend request is already on its way to "+formData.friendname);
                            })
                            }else{
                                alert.onDidDismiss(() => {
                                    this.presentToast("A friend request was sent to "+formData.friendname);
                                this.loadFriends();
                                });
                            }
                        },
                        err => {
                          alert.onDidDismiss(() => {
                            this.presentToast("Something went wrong. Please try again later.");
                          });
                        }
                    );
                }
            }
          }
        ]
      });
      alert.present();
    }

    presentToast(toastMessage) {
      let toast = this.toastCtrl.create({
        message: toastMessage,
        duration: 4000,
        position: 'bottom'
      });
      toast.present();
    }

[jgw96]

Hello @ferminmoli , thanks for the repo! So after looking it seems that your issue is also the same as the person above. Here is a working example of some code that is on your home page.

let actionSheet = this.actionSheetCtrl.create({
  buttons: [
    {
      text: 'Save Progress',
      handler: () => {
        onDidDismiss(() => {
          this.openAlert();
        });
      }
    },
    {
      text: 'Save & Complete',
      handler: () => {
        onDidDismiss(() => {
          this.openAlert();
        });
      }
    }
  ]
});

Thanks for using Ionic! You can read more about our async navigation on this page of our docs.

[jgw96]

@jamalsleman Do the above examples help solve your issue? Thanks!

[ferminmoli]

@jgw96 thanks for your help! calling onDidDismiss fix my issue!

[luchillo17]

@jgw96 I think this is a bit of a design flaw in the Ionic router, would it be possible to just make a queue of navigation? say if a transition is taking place and a navigation push happens why not adding it to a queue and only perform the next queued transition when the active one is finished, what do you think?

Think of it as the JS event loop where all async ops are queued in the JS event loop, then JS event loop will look if the event loop (or call stack) is empty before asking the queue for next operation, maybe that way this kind of issues wouldn't happen.

[jgw96]

@Luchillo haha we are already ahead of you on that idea 😜 . In the future we do plan on implementing transitions as a queue, kind of like how it works on native android and ios. This will keep you from running into issues where several alerts are open at a time and keep you from triggering multiple transitions at a time.

[luchillo17]

So you guys beat me on the idea huh? what about the Angular 2 Router, in forums it's said to be disabled, if i go and replace the nav component by the Angular 2 Router would it not work? after all ionic components are still Angular 2 components, right?

[jgw96]

We are also working on a solution for a router that ties in perfectly with our navcontroller, is made specifically for mobile, and works great for Progressive Web Apps! This solution should be in beta.12 if everything continues on track 😃

[luchillo17]

Do that new router has AoT and lazy loading integrated? I don't mean to be rude but so far I just see that new router as just patching the nav system, I know the mobile standard for navigation is a LIFO stack but what's wrong with routing like the Angular Router in a mobile app?

Specially if we use the same code from the mobile app as a web app, in my case I have the app in Ios and Play stores and for mobile devices that don't support the app they can use the app from the chrome mobile browser.

[jgw96]

No problem, i understand the frustration! So with our new build process beta.12 will use AOT compile right out of the box. This is gonna give our start up time, and general navigation performance a huge improvement. Also, with AOT compile and our new build process our bundle will be much smaller too, which means that your apps will be smaller and for Progressive Web Apps you will be pushing less javascript over the network. We are not currently implementing lazy loading but it is in the discussion stage. Also, our router is going to make sure that the url is a first class citizen which is very important for share-ability and PWA's. There is nothing wrong with the Angular Router at all! We just want to make sure that we give developers a solution that ties in with Ionic 2 perfectly and minimizes the amount of changes that you as a developer need to do to use routing. I think once it comes out you will be very happy with it 😃 . Thanks!

[jgw96]

Going to go ahead and close this issue, but @jamalsleman if you are still having this issue after trying the examples above feel free to comment and I will happily reopen. Thanks for using Ionic everyone and thanks for the chat @Luchillo !

[luchillo17]

No problem, now back to finishing my tutorial on Ionic 2 database versioning.

[andrezap]

I had the same issue and it helped me a lot. Thanks for sharing the solution!

[ghost]

Hi All,

I have the same issues and this solution is not helping me. I thought this is general solution and will work fro other controllers too. Could you please look at my code and let me know what is wrong with it ?

Here is my code:

 private onCartButtonClick() {
    var preloader = this.loadingCtrl.create({
      dismissOnPageChange: true,
      content: ''
    });
    preloader.present()
    preloader.onDidDismiss(() => {
      console.log(">>>>onDidDismiss >>> ")
      self.showAlertDialog()
    })

    // some functionality here.... 
    preloader.dismiss()
}

private showAlertDialog() {
    var alertBox = this.alertController.create( {
      title: "Title",
      subTitle: "Message",
      buttons: ["Close"]
    })
    alertBox.present()
  }

[danishin]

Has this issue been fixed (V2.2.0)? I'm still experiencing weird issue of second alert dismissing immediately upon showing when it is shown after first alert dismisses.

[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.