Search code examples
c#blazordialogmudblazor

Opening up dialog from MudAutocomplete and the list is still visible

I have recreated the issue here: https://try.mudblazor.com/snippet/wkcdPFQrHgjgAXni

The issue is that I have a form on a Dialog which contains a MudAutoComplete. I have used the AfterItemsTemplate so that users have the option to add a new item to the list if they don't the item they want to select.

When this button is pressed (The add item button) the second dialog opens to add a new item. However, the MudAutoComplete list is still open and it covers the dialog that has just opened. I can still select an item from this list too which means that I can add an infinite amount of dialogs as the add button is still visible and working.

How can I hide this list after the second dialog is opened. Note that I don't want to close the original dialog.

Any help at all would be appreciated.

Update: Found this https://github.com/MudBlazor/MudBlazor/issues/1342 But do not understand what to do still.

Solution

  • One possibility is to close the MudAutocomplete component when opening the new Dialog

    Set a reference to the MudAutocomplete component.

    private MudAutocomplete<Element> _mudAuto = new MudAutocomplete<Element>();

    and

    <MudAutocomplete @ref="_mudAuto" ... >

    Then use the method ToggleMenu to close it.

    private void OpenDialog()
{
    _mudAuto.ToggleMenu();
    var options = new DialogOptions { CloseOnEscapeKey = true };
    DialogService.Show<DialogUsageExample_Dialog>("Simple Dialog", options);
}