MudBlazor 对话框在多个触发器上抛出错误

Question

使用 Blazor 服务器端渲染。 我有一个 MudTable，并显示了一些图像。 我想单击图像，然后呈现一个包含图像完整尺寸的对话框。 它工作正常，但是一旦用户双击图像（第二次单击必须在对话框打开之前发生），我就会在控制台上收到此错误。

Microsoft.JSInterop.JSException：无法聚焦无效元素。 错误：无法聚焦无效元素。 在 Object.focus ...

我相信这与创建对话框的延迟有关，因为在开发人员预览中我几乎无法重现该问题，如果我添加 Task.Delay() 问题会变得更好。

这是相关代码

@inject IDialogService DialogService
.
.
.
<MudImage Fluid="true" Style="max-height:100px" [email protected] 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);
}

Answer 1

解决了！只是把它留在这里给那些陷入未来的人。

为了避免这个错误，你必须添加

DefaultFocus="DefaultFocus.None"

在用于对话框内容的 razor 组件中的 MudDialog 标签中。