Won't Fix
Last Updated: 05 Mar 2024 08:15 by ADMIN
Created on: 27 Feb 2024 18:57
Category: UI for Blazor
Type: Bug Report
When attempting to show confirm dialog on dialog close, confirm dialog pops under the main dialog

We have edit dialogs with editable fields on them, and we want to display a confirmation dialog if the user tries to close the edit dialog without saving. Simplified code to illustrate the issue: 


1 comment
Posted on: 05 Mar 2024 08:15

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)
        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.

Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!