MudDropContainer中点击文本框无法选中对应项文本的问题排查

我有一个包含两个容器的MudDropContainer，两者均展示可通过拖拽重新排序的记录列表。每个项中都有一个文本框用于编辑项数据。目前点击任意文本框时，都会选中最后一条记录的文本，而非当前点击项的文本。如何实现点击文本框时自动选中对应项的全部文本？

相关代码：

<MudDropContainer T="ProjectBatchColumns" Items="lstProjClosingField" ItemsSelector="@((item,dropzone) => item.Identifier == dropzone)" ItemDropped="ItemUpdated"
    Class="d-block flex-wrap flex-grow-1" @ref="content">
    <ChildContent>
        <MudDropZone T="ProjectBatchColumns" Identifier="Drop Zone 1" Class="rounded mud-background-gray pa-6 ma-8 flex-grow-1" AllowReorder="true"
                     ItemIsDisabled="@( (item) => item.Visible == false || item.Sequence < 0)" @ref="DZ1">
            <MudText Typo="Typo.h6">Visible Columns</MudText>
            <MudText Class="mb-4">Drag and drop to reorder.</MudText>
        </MudDropZone>
        <MudDropZone T="ProjectBatchColumns" Identifier="DropZone1" Class="rounded mud-background-gray pa-6 ma-8 flex-grow-1" AllowReorder="true"
                     ItemIsDisabled="@( (item) => item.Visible == false || item.Sequence < 0)">
            <MudText Typo="Typo.h6">Hidden Columns</MudText>
            <MudText Class="mb-4">Mark the column as visible to modify order.</MudText>
        </MudDropZone>
    </ChildContent>
    <ItemRenderer>
        <MudPaper Class="pa-4 my-4">
            <MudGrid style="align-items: center;">
                <MudItem xs="6" sm="4" Class="small-padding">
                    Name<br /><MudText Style="display:inline-flex">@context.Name</MudText>
                </MudItem>
                <MudItem xs="6" sm="4" Class="small-padding">
                    Alias<br />
                    @if (context.AliasEditable)
                    {
                        <MudTextField @ref="selectedAlias" T="string" onfocus="@(async () => selectedAlias.SelectAsync())" Value="@context.Alias" ValueChanged="@(async (e) => { saveData("Alias", e, @context); })"></MudTextField>
                    }
                    else
                    {
                        <MudTextField T="string" Value="@context.Alias" ValueChanged="@(async (e) => { saveData("Alias", e, @context); })" Disabled="true"></MudTextField>
                    }
                </MudItem>
                <MudItem xs="6" sm="4" Class="small-padding">
                    Visible<br /><MudCheckBox T="bool" Checked="@context.Visible" CheckedChanged="@((e) => SaveBatchReview(context, "Visible", e))"></MudCheckBox>
                </MudItem>
            </MudGrid>
        </MudPaper>
    </ItemRenderer>
</MudDropContainer>

预期效果是点击文本框时，高亮当前项的文本以便直接编辑，但目前无论点击哪一行，始终选中最后一项的文本。尝试过调整@ref、访问DropZone项集合、使用onclick函数，但均未解决问题，请问遗漏了什么？

问题根源 #

你用单个变量selectedAlias存储所有文本框的引用，在循环渲染列表项时，这个变量会被最后一个文本框的引用覆盖。所以无论点击哪个文本框，实际调用的都是最后一个文本框的SelectAsync()方法。

解决方法 #

方法一：维护文本框引用集合

1. 在组件代码中定义字典存储每个项对应的文本框引用：

private Dictionary<ProjectBatchColumns, MudTextField<string>> _aliasTextFields = new();

2. 初始化数据源时，为每个项在字典中占位：

foreach (var item in lstProjClosingField)
{
    _aliasTextFields[item] = null;
}

3. 修改ItemRenderer中的文本框，将引用绑定到字典对应项：

<MudTextField @ref="@(_aliasTextFields[context])" T="string" 
              onfocus="@(async () => await _aliasTextFields[context].SelectAsync())" 
              Value="@context.Alias" 
              ValueChanged="@(async (e) => { saveData("Alias", e, context); })">
</MudTextField>

方法二：使用原生JS直接操作（更简洁）

不需要维护C#端的引用集合，直接利用浏览器原生API在聚焦时选中文本：

<MudTextField T="string" 
              onfocus="this.select()" 
              Value="@context.Alias" 
              ValueChanged="@(async (e) => { saveData("Alias", e, context); })">
</MudTextField>

内容的提问来源于stack exchange，提问作者seth monkey