[v2 beta.11] overlay components don't display as expected

[jasonwaters]

Short description of the problem:

In my ionic app I have some code at the root component that listens for events. Then, based on these events it's creates and presents overlay components like alert, loading, and modals. I switched this code to use the respective controllers in beta 11, hoping it would alleviate some problems I was having before beta.11. Anyway, the problem is that If the user has navigated a few pages deep and an event is fired so that the root component creates and presents an overlay... there seems to be a conflict with the current navigation stack and the components do not always display. This is especially the case if, for example, a loading component has been presented by a page a few levels deep in the nav stack and then an event is fired that would cause the root element to present a modal. The modal seems to be in the DOM but not accessible.

What behavior are you expecting?

I expect any overlay that is presented to be displayed regardless of which component in the nav stack called the present() method. I also thought that, with the introduction of overlay controllers, there would no longer be a conflict between the various overlays and the nav controller. but that does not seem to be the case.

Steps to reproduce:

1. create an app and in the root element set a timeout to create and present a modal in 5 or 10 seconds.
2. navigate at least one page deep (away from the root component).
3. make the page you navigated to present a loading component with a 10 second duration, as soon as you get there.
4. while there, wait for the timeout to complete in the root component and see that the modal is not visible. Not even after the loading component disappears.

Which Ionic Version?

[email protected]

[jasonwaters]

In investigating a little further, I think I have found a possible explanation.

My nested component page does the following:

1. creates and presents a loading component with no duration specified.
2. the page waits on some asynchronous callback to return.
3. during that time the root component creates and presents a modal.
4. milliseonds after the modal is presented, the asynchronous callback responds and the loading.dismiss() method is called by the nested component page.
5. instead of the dismiss method actually dismissing the loading component, the modal component is dismissed and the user continues to see the loading component.

[jgw96]

Hello! Thanks for opening an issue with us! Would you mind creating a repo that demonstrates this issue? Thanks for using Ionic!

[jasonwaters]

Hi, I'll see what I can put together. But I think my instructions are pretty clear on how to dupe, no?

[jgw96]

Hello, after testing this seems to be caused by the same bug that causes this issue #7605. Because of that I am going to close this issue as a duplicate. Thanks for using Ionic!