当在包含 div 上设置 onkeydown 和 onkeyup 事件时，MudBlazor MudDataGrid 会滞后于页面

Question

这个问题花了我几个小时才找到，我终于能够整理一个示例应用程序来演示我遇到的问题。这似乎是一个非常奇怪的“错误？”。如果需要更多说明，请发表评论。

问题：

当具有 1+ 行和 28+ 列的 MudDataGrid 位于设置了 onkeydown AND onkeyup 事件的 div 内时，它将导致滞后。对于我的情况，快速输入文本区域将开始滞后，并且文本将以块的形式显示。

情况/背景：

所以我在 div 中有一个 MudDataGrid，配置了 onkeydown 和 onkeyup 事件。我还有一个文本区域，用户可以在其中输入文本。当 DataGrid 有 28 列以上时，将导致文本区域中的输入滞后。 DataGrid 的列越多，它就会变得越滞后。在我的测试中，我开始在 28 列左右看到这个问题。

如果我删除 onkeydown 和 onkeyup 事件并填充 DataGrid，它不会滞后。如果我删除 DataGrid 并保留事件，它不会滞后。仅当 DataGrid 有 28 列以上且其内部设置了 onkeydown 和 onkeyup 事件的 div 时，它才会滞后。

重现此问题的步骤

1. 从下面获取我的代码并将其放入 Blazor WASM 项目中
   • 仅供参考，此示例中 DataGrid 的类型是 IDictionary，这不仅仅是为了测试目的，这就是我在实际应用程序中使用的
2. 启动应用程序
3. 在将数据添加到 DataGrid 之前，快速在文本区域中键入至少两个 DIFFERENT 键，并注意没有任何延迟。
   • 示例：快速输入 jsijjiejifjiefnvnbejwnuufvkemfhjamwnwcjw
   • 额外：检查浏览器任务管理器，注意当您键入时，选项卡的 CPU 不会爬得很高
4. 现在单击“添加数据”。这将向 DataGrid 添加两行 40 列的数据。
5. 现在快速在文本区域中输入一堆随机文本。请注意文本将如何开始滞后于屏幕并以块的形式显示。
   • 如果打开浏览器任务管理器，您将看到 Blazor 选项卡的 CPU 飙升至 100%

其他：

1. 我正在使用.Net 6.0
2. MudBlazor 版本 6.1.7
   • 我也用6.11.1版本进行了测试，也遇到了同样的问题
3. Blazor WASM
4. 这个问题在 Chrome 上似乎更突出，但同样的问题也发生在 FireFox 上。

代码：

<div @onkeydown="KeyDown" @onkeyup="KeyUp">

  <div style="height: 20vh; width: 100vw; display:flex; flex-direction: column; align-items: center; justify-content: center;">
    <textarea style="width: 70vw; border: 2px solid black;"></textarea>
    <button class="btn btn-primary" @onclick="AddData">Add Data</button>
  </div>

  <div style="height:60vh; width: 100vw;">
    @if (Data.Count > 0)
    {
      <MudDataGrid T="IDictionary<string, object>" Items="@Data">
        <Columns>
          @foreach (var col in Columns)
          {
            <Column T="IDictionary<string, object>" FieldType="@col.Value" Field="@col.Key" Title="@col.Key" />
          }
        </Columns>
      </MudDataGrid>
    }
  </div>

</div>

@code {

  Dictionary<String, Type> Columns { get; set; } = new Dictionary<String, Type>();
  List<Dictionary<String, Object>> Data { get; set; } = new List<Dictionary<String, Object>>();

  private void KeyUp()
  {
  }

  private void KeyDown()
  {
  }

  private void AddData()
  {

    int ColumnCount = 40;
    Dictionary<string, object> Row1 = new Dictionary<string, object>();
    Dictionary<string, object> Row2 = new Dictionary<string, object>();

    for (int i = 1; i <= ColumnCount; i++)
    {
      Columns.Add($"Col_{i}", typeof(string));
      Row1.Add($"Col_{i}", $"TestValue1_{i}");
      Row2.Add($"Col_{i}", $"TestValue2_{i}");
    }

    Data.Add(Row1);
    Data.Add(Row2);

  }

}

Answer 1

在 MudBlazor 团队的帮助下，我终于找到了解决方案。我需要像这样设置我的包含 div：

<div @onkeydown="EventUtil.AsNonRenderingEventHandler<KeyboardEventArgs>(KeyDown)" @onkeyup="EventUtil.AsNonRenderingEventHandler<KeyboardEventArgs>(KeyUp)">