Ionic-framework: Multiple overlays of different types shown at once don't work correctly

[Kobzol]

Short description of the problem:

If I show a toast and after its present completes I show an action sheet or loading, the second view will not work correctly (action sheet buttons will not close it and the loading will not close after its duration completes).

What behavior are you expecting?

That there can be multiple different overlays shown at the same time.

Steps to reproduce:

1. Create and show a Toast
2. Await the toast's present promise and then present an action sheet or loading

let t = toastCtrl.create({ message: "test", duration: 2000 });
t.present().then(() => {
   let view = actionSheetCtrl.create({ title: "test", buttons: ["Btn 1", "Btn 2"] });
   // or let view = loadingCtrl.create({ content: "text", duration: 1000 });
   view.present();
});

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

Run ionic info from terminal/cmd prompt: (paste output below)
Cordova CLI: 6.1.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.35
Ionic App Lib Version: 2.0.0-beta.19
OS:
Node Version: v6.2.0

[alexbainbridge]

FYI When testing that this is addressed, I put two example situations (with code) on #7578 (that is now closed as a duplicate of this one)

Specifically toast related ........ toast then modal during a duration phase, toast then backbutton during a duration phase

Thanks!

[windwp]

+1

[uncle-mo]

+1

[intitec]

+1 . Toast -> Alert.

[AcademyLime]

+1

[jgw96]

Note to self:

[jgw96]

@alexbainbridge would you mind trying enableProdMode() and seeing if that fixes the issue for you?

[alexbainbridge]

@jgw96 Hey Justin

OK - so this is interesting. Production mode fixes toast then (while showing) backbutton / menu button (showing side menu). I have double checked this is broken when NOT production mode.

However toast showing (during a duration showing phase) - and then firing a modal..... that is still broken, in production mode.

So partially addressed - and maybe a hint as to where the problem is....... AND I guess I can manually dismiss the toast before showing any modals...... maybe!

[jgw96]

@alexbainbridge Thanks for testing! Does opening a toast and then firing a modal cause the same error as the screenshot i posted above?

[jgw96]

note to self/team: regarding the toast + other overlay component issue ive narrowed it down to ion-backdrop. Also https://github.com/angular/angular/issues/6005#issuecomment-165905348 discusses what were running into here.

[alexbainbridge]

I have never got any errors in the console log for this..... just a showing/hiding what looks like in old school development is an infinite loop..... and a locked up UI

Is there any additional console logging mode you turn on ? I generally get errors when there is one, but not sure if you have an additional mode

[jgw96]

@alexbainbridge Ahh, ok i think i know what the issue is their and its not gonna log anything to the console. Could you try setting dismissOnPageChange to true on your toast?

 let toast = this.toastCtrl.create({
   dismissOnPageChange: true
 })

[alexbainbridge]

@jgw96 Sadly already do

I use this

let toast = this.toast.create({ message: 'Saved successfully', dismissOnPageChange : true, duration: 1500 });

[alexbainbridge]

To clarify, I only get the issue during the duration phase (re code above), after the toast has self dismissed, all is good with navigation to modals etc

[jgw96]

@alexbainbridge so the issue your describing is actually a separate issue that i am going to look into but the good news is that this issue is being fixed as we speak 😄 . I was able to track down the issue to a binding/change detection issue and one of my teammates is working up a fix right now. Thanks for all the help debugging!

[AcademyLime]

Thanks for looking into this. I was fighting with this same issue. :) https://github.com/AcademyLime/demo

[jgw96]

Hello all! Happy to confirm that this has been fixed and will be in the beta.12 release!

[ashutoshagg]

@jgw96 We are facing the same issue after upgrading to Beta 11. Can we get any intermediate solution before Beta 12 is rolled out?
Thanks

[rodriguesgm]

it would be good to have some workaround for beta11

[cwoll87]

+1

[sergeyrolich]

Someone found a possible temporary fix?

[devillexio]

Thanks for the confirmation @jgw96!

This does however seem like it will prevent a lot of users from upgrading to Ionic 2 Beta 11, or am I missing something?

[danielehrhardt]

+1
no temp fix?

[windwp]

if someone looking for a temp fix? just hide previous ViewController and add delay for next ViewController display

[saurabhvyas]

+1