MudDialog Jsinterop exception

[MaxBrooks114]

Bug type

Component

Component name

MudDialog/ MudFocusTrap

What happened?

We use MudDialog's for some of our loading dialogs. We have a boolean like "var loaded = false" and we call the dialog service to show the dialog.

something like:

private bool loading = true;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        var loadingDialog = dialogService.Show<LoadingDialog>(string.Empty, new DialogParameters { { "MainLayoutLoading", true } 
    });
             ....some logic....
            loadingDialog.Close();
            loading = false;

    }
}

Once we updated to 6.19 this error started happening:

 Error: Microsoft.JSInterop.JSException: Unable to focus an invalid element.
Error: Unable to focus an invalid element.
    at Object.focus (https://test.d.com/_framework/blazor.server.js:1:33459)
    at https://test.d.com/_framework/blazor.server.js:1:3244
    at new Promise (<anonymous>)
    at y.beginInvokeJSFromDotNet (https://test.d.com/_framework/blazor.server.js:1:3201)
    at Yt._invokeClientMethod (https://test.d.com/_framework/blazor.server.js:1:61041)
    at Yt._processIncomingData (https://test.d.com/_framework/blazor.server.js:1:58516)
    at Yt.connection.onreceive (https://test.d.com/_framework/blazor.server.js:1:52157)
    at s.onmessage (https://test.d.com/_framework/blazor.server.js:1:80302)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
   at MudBlazor.MudFocusTrap.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

and the page breaks. Reverting back to 6.17 fixes it.

Expected behavior

It doesn't error out.

Reproduction link

N/A

Reproduction steps

1. Call dialogservice.show in onafterrenderasync first render on mudblazor v 6.19.1

Relevant log output

No response

Version (bug)

6.19.1

Version (working)

6.17

What browsers are you seeing the problem on?

Chrome

On which operating systems are you experiencing the issue?

Windows

Pull Request

• [ ] I would like to do a Pull Request

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[ScarletKuro]

Hi.

Probably just enough to set the DefaultFocus to DefaultFocus.None for the MudDialog to have the previous behavior rather than rollback to 6.17.0 https://github.com/MudBlazor/MudBlazor/pull/8366 cc: @danielchalmers @henon

[danielchalmers]

Can you post a complete working reproduction so we can check it out? preferably as a github repo

[MaxBrooks114]

@ScarletKuro That appears to have did it, thanks.

@danielchalmers I can do this at some point if you think it's still necessary.

[danielchalmers]

I can do this at some point if you think it's still necessary.

I'd love to check it out

[brian-agencyroot]

This workaround of adding DefaultFocus.None to all the <MudDialog> tags did not work for us; the problem persists. We have dialogs that when a button is clicked loads a new layout page and dismisses the dialog. That is when we get the error. Is there somewhere else we need to set this default focus? Rolling back to 6.17.0 fixes our issue.

[ScarletKuro]

This workaround of adding DefaultFocus.None to all the <MudDialog> tags did not work for us; the problem persists. We have dialogs that when a button is clicked loads a new layout page and dismisses the dialog. That is when we get the error. Is there somewhere else we need to set this default focus? Rolling back to 6.17.0 fixes our issue.

Can you post a reproduction so that @danielchalmers could check?

[brian-agencyroot]

This workaround of adding DefaultFocus.None to all the <MudDialog> tags did not work for us; the problem persists. We have dialogs that when a button is clicked loads a new layout page and dismisses the dialog. That is when we get the error. Is there somewhere else we need to set this default focus? Rolling back to 6.17.0 fixes our issue.

Can you post a reproduction so that @danielchalmers could check?

Sure. On a page there is a button that when clicked displays a MudDialog:

protected void PrintClicked()
    {
        var parameters = new DialogParameters
        {
            ["QuoteGroupID"] = QuoteGroupState.Value.QuoteGroupID
        };

        DialogService.Show(typeof(PrintSettingsComponent), "", parameters, new DialogOptions
        {
            CloseButton = true,
            CloseOnEscapeKey = true,
            DisableBackdropClick = true,
            FullWidth = true,
            Position = DialogPosition.TopCenter
        });
    }

The PrintSettingsComponent looks like this:

<MudDialog DefaultFocus="DefaultFocus.None">
    <TitleContent>
        <MudText Typo="Typo.h5">
            <MudIcon Icon="@Icons.Material.Filled.Print"/>
            Print Settings
        </MudText>
    </TitleContent>
    <DialogContent>
        <!-- stuff here omitted for brevity -->
 </DialogContent>
    <DialogActions>
        <MudButton ButtonType="ButtonType.Button"
                   OnClick="CancelClicked">
            Cancel
        </MudButton>
        <SubmitButtonComponent Disabled="@(!IsValid)"
                               OnClick="PrintClickedAsync"
                               StartIcon="@Icons.Material.Filled.Preview">
            Print Preview
        </SubmitButtonComponent>
    </DialogActions>
</MudDialog>

When Cancel is clicked everything works fine. Here's that code:

protected void CancelClicked() => MudDialog.Close();

When Print Preview is clicked, it calls a Fluxor action which ultimately does this:

App.SetLayout(typeof(PrintLayout));

In 6.19.1 when that button is clicked the layout changes, the dialog is dismissed and the page renders but an error is thrown in the console:

Microsoft.JSInterop.JSException: Unable to focus an invalid element.
Error: Unable to focus an invalid element.
   at Object.focus (https://mydomain.com/_framework/blazor.webassembly.js:1:32669)
   at https://lmydomain.com/_framework/blazor.webassembly.js:1:2878
   at nrWrapper (https:/mydomain.com/:14:15715)
   at new Promise (<anonymous>)
   at new Promise (https://lmydomain.com/:14:19884)
   at b.beginInvokeJSFromDotNet (https://mydomain.com/_framework/blazor.webassembly.js:1:2835)
   at [Object.vn](http://object.vn/) [as invokeJSJson] (https://mydomain.com/_framework/blazor.webassembly.js:1:58849)
   at https://mydomain.com/_framework/dotnet.runtime.8.0.4.g36q388mwp.js:3:178210
   at xl (https://mydomain.com/_framework/dotnet.runtime.8.0.4.g36q388mwp.js:3:179044)
   at https://mydomain.com/_framework/dotnet.native.wasm:wasm-function[349]:0x1fab3
  at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[Microsoft.JSInterop.Infrastructure.IJSVoidResult, Microsoft.JSInterop, Version=8.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
  at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime , String , Object[] )
  at MudBlazor.MudFocusTrap.OnAfterRenderAsync(Boolean firstRender)
  at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task , ComponentState )

In 6.17.0 I do not get this error.

[henon]

Hi.

Probably just enough to set the DefaultFocus to DefaultFocus.None for the MudDialog to have the previous behavior rather than rollback to 6.17.0 #8366 cc: @danielchalmers @henon

I think after this PR #8831 you can set the default back to DefaultFocus.None via MudGlobal for your app and it would solve your problem. I think it was good we changed the default value as it makes more sense for most users or am I wrong?