Hello Ross,

The observed behavior (race condition) results from how Blazor events work:

• By design, the Dialog component always recalculates its z-index style in OnParametersSetAsync, when its Visible parameter value changes. This ensures it's on top of other popups on the page.
• When the user tries to close the first Dialog, the second confirmation Dialog shows in the VisibleChanged handler of the first Dialog, but before OnParametersSetAsync fires for the first Dialog.
• As a result, the second Dialog shows above the first one, but then the first one immediately recalculates its z-index and ends up on top again.

I don't think there is an easy and reliable way to detect and prevent such scenarios, because the two Dialogs are completely independent of each other and they are not aware of the app business logic.

The easiest solution is to trigger a Blazor life cycle event sequence before the second confirmation Dialog shows. This will give time for the first Dialog's OnParametersSetAsync event to fire:

    private async Task OnClose(bool isVisible)
    {
        if (!isVisible)
        {
            await Task.Delay(1);
            var proceed = await Dialogs.ConfirmAsync("You have unsaved changes, are you sure you want to leave?");

            if (!proceed)
            {
                return;
            }
        }
        Visible = isVisible;
    }

You will notice that now the first Dialog does not change its z-index at all, because the second Dialog is not visible yet when OnParametersSetAsync fires for the fist one, so it's still on top.

Regards,
Dimo
Progress Telerik