bug: App-wide ion-alert gets covered by page-specific ion-modal

[diegodlh]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:

An app-wide alert included in a Ionic React project's App.tsx file is covered by a modal opened by one of the app's pages.

Expected behavior:

The alert should remain on top of everything else.

Steps to reproduce:

1. Include an IonAlert element as child of the IonApp element in the App.tsx file. I found this to be the easiest way to have an app-wide alert.
2. Include an IonModal element in the default Home page of the app.
3. When the app launches, it briefly shows the app-wide alert, but then it gets covered by the Home page's modal. The ion-alert element is still there, but with a z-index smaller than the ion-modal element.

Related code:
See this example app forked from ionic-react-tabs: https://stackblitz.com/edit/ionic-react-tabs-3zz2qa

Other information:

In the app I am developing (which unfortunately I cannot share) the logic to decide whether to show the alert and modal is more complex than a simple true/false, and in this situation a race condition occurs where sometimes the ion-alert element is opened later and ends up with a higher z-index on top, while sometimes the ion-modal opens later and ends up on top instead.

Ionic info:

Ionic:

   Ionic CLI       : 6.11.0 (~/.nvm/versions/node/v12.18.3/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.2.3

Capacitor:

   Capacitor CLI   : 2.2.1
   @capacitor/core : 2.2.1

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.18.3 (~/.nvm/versions/node/v12.18.3/bin/node)
   npm    : 6.14.6
   OS     : Linux 5.5

[liamdebeasi]

Thanks for the issue. The problem here is that the modal is being presented after the alert is presented. The overlay that is presented last always has the higher z-index.

I would probably consider this to be expected behavior, but I am curious to hear more about the use case in "Other information". Why are you showing an alert and a modal at the same time?

[diegodlh]

Thank you for your reply.

The overlay that is presented last always has the higher z-index.

This sounds reasonable to me. However, the Ionic documentation says that "An alert appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app." Therefore, I was expecting alerts wouldn't get covered by other overlays.
I have solved it by forcing a z-index of 99999 to all alert elements, but I'm not sure how safe this is.

Why are you showing an alert and a modal at the same time?

I'm relatively new to both React and Ionic and I may not be doing the best thing here.
I'm using push notifications and I would like these notifications to be shown in an alert. Notifications can arrive at any time. If notifications arrive when the app is in the background, they should be shown when the user reopens the app.
To avoid having to include an alert element in each page of my app, I decided to include just one in the App.tsx file (as shown in the Stackblitz sample app mentioned above).
In addition, my app's home page automatically opens a modal if some conditions are met. Specifically, the home page provides a list of stuff. If the list is empty, the modal to add a new one should open.
If there is a notification to show when the user opens the app, the alert is shown app-wide. However, when the home page is loaded, if there are no items in the list, the modal to add a new one opens too and the alert gets covered.

[liamdebeasi]

This sounds reasonable to me. However, the Ionic documentation says that "An alert appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app." Therefore, I was expecting alerts wouldn't get covered by other overlays.

Yep, I can see how that might be confusing. I will update the wording on that in the docs. My understanding is that text really means "The alert overlays your main app content" not that it overlays all content, including other overlays.

I have solved it by forcing a z-index of 99999 to all alert elements, but I'm not sure how safe this is.

That should be fine. Just note that this will cause the alert to appear above all overlays, not just modals. The other option here is to assign a class to this particular kind of modal via the cssClass property and set the z-index by targeting that class. This might be best if you use alerts in other non-notification contexts.

I'm using push notifications and I would like these notifications to be shown in an alert. Notifications can arrive at any time. If notifications arrive when the app is in the background, they should be shown when the user reopens the app.
To avoid having to include an alert element in each page of my app, I decided to include just one in the App.tsx file (as shown in the Stackblitz sample app mentioned above).

An alternative here would be to use ion-toast instead of an ion-alert. When it comes to showing the notification in-app, users might appreciate a less obtrusive popup. As per the spec, ion-toast will display over all content, including other overlays. Is ion-toast something that could be an option in your use case?

[diegodlh]

Thank you for your prompt and detailed response, Liam.

Unfortunately an ion-toast is not appropriate here because I want to make sure users see these messages (and toasts are meant to disappear after a short time period).

But the solution of manually setting the z-index, with your suggestion of using a specific class, work OK for me.

I understand this is expected behavior (that is, not an issue), so I'm closing this now.

Thanks again for your time and support!