I’ve got a dropzone with two containers. Both show a list of items to recreate a grid of records which can be reordered by drag and drop. In each of these items there is a text field to allow for some editing of the item data. How can I select the correct item’s text field to automatically select all the text on clicking on the text field? The code that I currently have will select the bottom record’s text no matter which item it is that I select.

Here is the code.

<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>

The idea is in the top list, any given item has a selectedAlias ref that when the text field gets the focus of it then highlights that record’s text so that the user can just start typing to make the edit. Right now, this code runs and when a text field is selected at any line, the last item’s text is the one which becomes the highlighted one.

What am I missing/doing wrong?

Thank you,

This ends up selecting the bottom item’s text and not the specific selected item’s text. Tried adjusting with various @ref items to find the specific one. Tried accessing the dropzone’s item collection but can’t seem to get to it. Tried using an onclick function but can’t get at the underlining object to select the text, just the context data of the item.