Dialog modal always apears behind modal fronstage

[ImVeryLost]

Describe the bug Modals opened using UiFramework.dialogs.modal.open always appear behind fronstages that were activated using UiFramework.frontstages.openModalFrontstage, even if the dialog was opened after the fronstage.

To Reproduce Steps to reproduce the behavior:

1. Open modal frontstage using UiFramework.frontstages.openModalFrontstage
2. Open modal dialog using UiFramework.dialogs.modal.open
3. Dialog is shown underneath the front stage, making it unreadable.

Sandbox example https://www.itwinjs.org/sandboxes/ImVeryLost/lurleen-the-sapphire-parrot-695 (relevant code snippet starts at line 113)

Expected behavior Since the dialog was opened second, it should be on top. Alternatively modals could take a "priority" parameter that works similarly to z-index, or an "always on top". Note that the frontstage modal and the dialog are not related (e.g. settings page and "about application" dialog), so I would want to avoid setting parent ref or anything that would require this relationship.

Currently I'm using the following code:

 UiFramework.frontstages.closeModalFrontstage(); // Modal dialogs appear _under_ modal frontstages, making it look very very wonky.
 UiFramework.dialogs.modal.open(...)

But that means that modal fronstage is always closed, which does not work for all workflows

Screenshots

Desktop (please complete the applicable information):

• OS: Windows
• Browser: firefox, electron
• iTwin.js AppUI Version 4.6.1
• iTwin.js Version 4.4.0-dev.10

Additional context Add any other context about the problem here.

[raplemie]

Hi @ImVeryLost, itwinui-react modal component do not handle the required dynamic z-index automatically that is required for what you need.

You should get the desired result by using @itwin/core-react Dialog with modal={true} prop. (As you mention, core Dialog component do all tha magic for you, so you dont have to care about the priority.)

[ImVeryLost]

using @itwin/core-react Dialog with modal={true} prop

Thank you, that seems to work. I was using Dialog from itwinui-react, which for some reason does not handle the z-index the same way as the one from core-react...

[raplemie]

itwinui-react by itself is not aware of the multiple layers that exists in AppUI, core dialog current version is indeed iTwinUi React dialog with some of that added management, so you should have the same visual result. Are we Ok to close this issue ?

[ImVeryLost]

@raplemie ok to close, though i would suggest to look into resolving the issue for all react components that are opened using core modal dialogs and fronstages at some point - at least to decide if its feasible. I realize its low priority, but the current behavior is a bit confusing, and having such support might help with not needing to maintain multiple Dialog components in the future