Using Blazor Server Side Rendering. I have a MudTable, and I show some images. I want to click the image and then present a Dialog with the full dimension of image. It works fine, but as soon as a user double clicks the image (the second click has to occur before the Dialog is open), then I get this error on console.
Microsoft.JSInterop.JSException: Unable to focus an invalid element. Error: Unable to focus an invalid element. at Object.focus ...
I believe it has something to do with latency of creating the dialog, as in the developer preview I can barely reproduce the issue, and if I add Task.Delay() the issue gets better.
This is the relevant code
@inject IDialogService DialogService
.
.
.
<MudImage Fluid="true" Style="max-height:100px" Src=@context.ImgSrc Class="cursor-pointer" @onclick=@(() =>ShowImageDialog(context.ImgSrc))></MudImage>
.
.
.
private async Task ShowImageDialog(string imageUrl)
{
await Task.Delay(200); // The more delay I add, the issue starts to disappear
var parameters = new DialogParameters { ["ImageUrl"] = imageUrl };
var options = new DialogOptions { MaxWidth = MaxWidth.ExtraLarge, NoHeader = true, FullWidth = false, CloseButton = true, CloseOnEscapeKey = true };
DialogService.Show<Shared.ImageFull>("", parameters, options);
}
Solved! Just leaving it here for anyone stuck in the future.
To avoid this error, you have to add
DefaultFocus="DefaultFocus.None"
in the MudDialog tag in the razor component you use for the Dialog content.