Search code examples
c#.netblazor.net-7.0mudblazor

MudDialog is unresponsive when opened from an external class


I am trying to open a simple dialog with two MudButtons.

The dialog component:

<MudDialog>
    <DialogContent>
        <MudText>Cost or Foreign Cost?</MudText>
    </DialogContent>
    <DialogActions>
        <MudButton 
            Color="Color.Warning"
            OnClick="() => MudDialog.Close(DialogResult.Ok(false))">
            <MudText>
                Cost
            </MudText>
        </MudButton>
        <MudButton 
            Color="Color.Success"
            OnClick="() => MudDialog.Close(DialogResult.Ok(true))">
            <MudText>
                Foreign Cost
            </MudText>
        </MudButton>
    </DialogActions>
</MudDialog>

@code {
    [CascadingParameter] 
    MudDialogInstance MudDialog { get; set; }
}

I have a method in my Index.razor page that opens the dialog.

protected internal async Task<bool> ColumnDialog()
{
    bool result = false;
    await InvokeAsync(async () =>
    {
        var Dialog = DialogService.ShowAsync<Components.Dialogs.ASNColumnDialog>("", new(), new() { DisableBackdropClick = true, CloseOnEscapeKey = false });
        var Result = await Dialog.Result;
        result = (bool)Result.Data;
    });

    return result;
}

When calling the method through a button's onclick, the dialog opens and the buttons works as expected.

But when I call the method through an external class, the buttons are unresponsive.

I'm calling the method in the class like so:

var res = _indexPage.ColumnDialog().Result;

_indexPage is the Index.razor instance I have passed to my class

Any ideas why the dialog buttons are unresponsive? Does it have anything to do with the context in which the dialog is being opened? TIA


Solution

  • Turns out I was blocking the UI thread by using Task.Result, therefore not allowing it to respond to the dialog's button clicks.

    I modified the call to var res = await _indexPage.ColumnDialog() and everything worked as expected.