CODEWITHSUNDEEP
c#blazorblazor-webassemblymudblazor
micex
micex

Reputation: 53

MudBlazor Dialog Closes Automatically After a Few Seconds in MainLayout

I'm using Azure AD Authentication in my Blazor WebAssembly application, and I have configured App.razor like this:

<CascadingAuthenticationState>
<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
            <Authorizing>
                <MudPaper Class="pa-6 text-center">
                    <MudProgressCircular Indeterminate="true" Color="Color.Primary" Size="Size.Large" Class="mb-4" />
                    <MudText Typo="Typo.h6">@Localizer["Please wait, we are authorizing you..."]</MudText>
                </MudPaper>
            </Authorizing>
            <NotAuthorized>
               <NotAuthorized/>
            </NotAuthorized>
        </AuthorizeRouteView>
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
</Router>

I have MainLayout as the default layout. Here is its structure:

@inherits LayoutComponentBase
<MudRTLProvider RightToLeft="@LayoutService.IsRTL">
    <MudPopoverProvider />
    <MudDialogProvider />
    <MudSnackbarProvider />
    <MudLayout>
        <AuthorizeView>
            <Authorized>
                ...
            </Authorized>
            <NotAuthorized>
                <MudAlert Severity="Severity.Info" Class="mt-8 mud-width-full" Style="max-width:500px;">
                    Authentication is required, click <MudLink Href="authentication/login">sign in</MudLink>
                </MudAlert>
            </NotAuthorized>
        </AuthorizeView>
    </MudLayout>
</MudRTLProvider>

Once the user is authenticated, I need to check their profile data and, based on that, show a MudBlazor dialog.

So, I implemented the logic in OnAfterRenderAsync:

[CascadingParameter] private Task<AuthenticationState> AuthState { get; set; } = default!;
private IDialogReference? _dialogRef;
private bool _dialogOpened;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await base.OnAfterRenderAsync(firstRender);
    if (firstRender)
    {
        // At this point, the user might not be authenticated yet since MainLayout is the default layout
        await DoUiThings();
        StateHasChanged();
    }

    var user = (await AuthState).User;
    if (user.Identity is { IsAuthenticated: true } && !_dialogOpened) // Open dialog only if the user is authenticated and the dialog hasn't been opened yet
    {
        await ShowDialogIfAuthenticatedAsync();
    }
}

private async Task ShowDialogIfAuthenticatedAsync()
{
    _dialogRef = await DialogService.ShowAsync<GenericDialog>("Fake Title", parameters, dialogOptions);
    _dialogOpened = true;
    var resultDialog = await _dialogRef.Result;

    if (resultDialog != null && !resultDialog.Canceled)
    {
        Console.WriteLine("LOG: Dialog closed with OK");
    }
    else
    {
        Console.WriteLine("LOG: Dialog canceled");
    }
}

The issue:

How can I keep the dialog open inside MainLayout without it being closed automatically?

Upvotes: 0

Views: 55

Answers (1)

Jim Evans
Jim Evans

Reputation: 6515

Where you implement the MudDialogProvider (should be done in MainLayout) have you tried doing it like this <MudDialogProvider BackdropClick="false" />

Upvotes: 0

Related Questions