fix: always first item selected in ` FluentAutocomplete`, when using `*Template`s

[Prodigio]

🐛 Bug Report

I'm using FluentAutocomplete with OptionTemplate and SelectedOptionTemplate both wrapping a FluentPersona. When clicking on an item from the popup, it always selects the first one, even if I scroll way down. When removing the templates, I can select the correct item.

💻 Repro or Code Sample

<FluentAutocomplete Id="add-employee"
                    TOption="EmployeeDto"
                    AutoComplete="on"
                    Placeholder="-- Kennung auswählen --"
                    MaximumOptionsSearch="@_availableEmployees.Count()"
                    Multiple="false"
                    SelectValueOnTab="true"
                    ShowOverlayOnEmptyResults="false"
                    Virtualize="true"
                    @bind-SelectedOption="@_selectedEmployee"
                    OnOptionsSearch="@OnSearchTermChanged">
                    @* OptionText="@(item => $"{item.Nik}: {item.FullName}")"> *@
    <OptionTemplate Context="ctx">
        <FluentPersona ImageSize="25px"
                       Initials="@($"{ctx.Name?[..1]}{ctx.Lastname?[..1]}")"
                       Name="@($"{ctx.Nik}: {ctx.FullName}")" />
    </OptionTemplate>
    <SelectedOptionTemplate Context="ctx">
        <FluentPersona ImageSize="25px"
                       Initials="@($"{ctx.Name?[..1]}{ctx.Lastname?[..1]}")"
                       Name="@($"{ctx.Nik}: {ctx.FullName}")" />
    </SelectedOptionTemplate>
</FluentAutocomplete>

🤔 Expected Behavior

I excpet that the item I click on is selected.

😯 Current Behavior

When clicking on an item from the popup, it always selects the first one, even if I scroll way down. When removing the templates, I can select the correct item.

💁 Possible Solution

None.

🔦 Context

A workaround is to use use the Multiple="true" but limit it to MaximumSelectedOptions="1" and OptionText="@(item => $"{item.Nik}: {item.FullName}").

🌍 Your Environment

• OS & Device: Windows 11
• Browser Microsoft Edge Version 140.0.3485.54 (Official build) (64-bit)
• .NET 8 and Fluent UI Blazor library Version 4.12.1

[MarvinKlein1508]

@Prodigio we are happily to take a look on it. But you have to provide us with ready-to-run reproduction code in the form of something we can copy/paste, a (zipped) project structure or a GitHub repository.

We do not have capacity to craft or compose a reproduction for every issue that gets raised.

[Prodigio]

@MarvinKlein1508 sorry for the misunderstanding. Here is a minimal repro: BlazorApp1.zip

[MarvinKlein1508]

@Prodigio thanks for the code. I'm able to reproduce your mentioned behaviour. I've tracked down your issue to this line:

fluentui-blazor/src/Core/Components/List/ListComponentBase.razor.cs

Line 568 in 9f9b2da

InternalValue = GetOptionValue(item);

When this line has been executed InternalValue = GetOptionValue(item); the selected item will change to the first item from the list.

Sadly I have no clue what's causing this. I assign this issue to @dvoituron as he seems to be the man for this component :)

I also notice that the component is showing the more indicator.

Here is a copy paste code for the issue tester so you can debug it directly in the library.

@using Microsoft.FluentUI.AspNetCore.Components

<div class="card border-rounded border-aok-dark-green border-2">
    <div class="card-header bg-aok-dark-green text-white">
        <h5 class="card-title">Neuer Benutzer</h5>
    </div>

    <div class="card-body">
        <EditForm id="user-create-form" Model="_newUser">
            <div class="row mb-2">
                <div class="col-3 text-center text-lg-start">
                    <label for="add-benutzer-nik" class="fw-bold">NI-Kennung</label>
                    <FluentAutocomplete Id="add-employee"
                                        TOption="EmployeeDto"
                                        Width="350"
                                        AutoComplete="on"
                                        Placeholder="-- Kennung auswählen --"
                                        MaximumOptionsSearch="@_availableEmployees.Count()"
                                        Multiple="false"
                                        SelectValueOnTab="true"
                                        ShowOverlayOnEmptyResults="false"
                                        Virtualize="true"
                                        @bind-SelectedOption="@_selectedEmployee"
                                        OnOptionsSearch="@OnSearchTermChanged">
                        <OptionTemplate Context="ctx">
                            <FluentPersona ImageSize="25px"
                                           Initials="@($"{ctx.Name?[..1]}{ctx.Lastname?[..1]}")"
                                           Name="@($"{ctx.Nik}: {ctx.FullName}")" />
                        </OptionTemplate>
                        <SelectedOptionTemplate Context="ctx">
                            <FluentPersona ImageSize="25px"
                                           Class="pt-1 pe-2"
                                           Initials="@($"{ctx.Name?[..1]}{ctx.Lastname?[..1]}")"
                                           Name="@($"{ctx.Nik}: {ctx.FullName}")" />
                        </SelectedOptionTemplate>
                    </FluentAutocomplete>

                    <p>@_selectedEmployee?.Email</p>
                </div>
            </div>
        </EditForm>
    </div>
</div>

@code {
    private IReadOnlyList<EmployeeDto> _availableEmployees = [];

    private EmployeeDto? _selectedEmployee = null;
    private UserModel? _newUser;

    protected override void OnInitialized()
    {
        _availableEmployees = GetEmployees();

        _newUser = new UserModel();
    }

    private void OnSearchTermChanged(OptionsSearchEventArgs<EmployeeDto> e)
    {
        e.Items = _availableEmployees
            .Where(i =>
                (i.Nik?.Contains(e.Text, StringComparison.OrdinalIgnoreCase) ?? false)
                || (i.FullName?.Contains(e.Text, StringComparison.OrdinalIgnoreCase) ?? false)
            )
            .OrderBy(i => i.Nik);
    }

    private static readonly string[] Positions =
    {
        "Manager",
        "Developer",
        "Analyst",
        "Consultant",
        "Engineer",
        "Administrator",
        "Coordinator",
        "Designer",
    };

    private static readonly string[] Salutations = { "Mr.", "Ms.", "Dr.", "Prof." };
    private static readonly string[] Titles = { "MBA", "PhD", "MSc", "BSc", "MD" };
    private static readonly string[] NameSuffixes = { "Jr.", "Sr.", "III", "IV" };
    private static readonly string[] NamePrefixes = { "von", "van", "de", "di" };
    private static readonly string[] NamePrefixes2 = { "der", "den", "ter", "ten" };
    private static readonly string[] FirstNames =
    {
        "Anna",
        "Ben",
        "Clara",
        "David",
        "Eva",
        "Felix",
        "Greta",
        "Hans",
        "Isabel",
        "Jonas",
    };
    private static readonly string[] LastNames =
    {
        "Müller",
        "Schmidt",
        "Schneider",
        "Fischer",
        "Weber",
        "Meyer",
        "Wagner",
        "Becker",
        "Hoffmann",
        "Schäfer",
    };

    private static List<EmployeeDto> GetEmployees()
    {
        var employees = new List<EmployeeDto>();
        var rand = new Random();

        for (int i = 0; i < 200; i++)
        {
            var firstName = FirstNames[rand.Next(FirstNames.Length)];
            var lastName = LastNames[rand.Next(LastNames.Length)];
            var validFrom = DateTime.Now.AddDays(-rand.Next(0, 365 * 5));
            var validTo = validFrom.AddDays(rand.Next(30, 365 * 2));

            var employee = new EmployeeDto
            {
                Position = Positions[rand.Next(Positions.Length)],
                Nik = GenerateNik(rand),
                Salutation = Salutations[rand.Next(Salutations.Length)],
                Name = firstName,
                Lastname = lastName,
                Title = Titles[rand.Next(Titles.Length)],
                NameSuffix = NameSuffixes[rand.Next(NameSuffixes.Length)],
                NamePrefix = NamePrefixes[rand.Next(NamePrefixes.Length)],
                NamePrefix2 = NamePrefixes2[rand.Next(NamePrefixes2.Length)],
                Email = $"{firstName.ToLower()}.{lastName.ToLower()}@example.com",
                ValidFrom = validFrom,
                ValidTo = validTo,
            };

            employees.Add(employee);
        }

        return employees;
    }

    private static string GenerateNik(Random rand)
    {
        int number = rand.Next(1000000, 9999999);
        return $"NI{number}";
    }

    public class EmployeeDto
    {
        public string? Position { get; set; }

        public string? Nik { get; set; }

        public string? Salutation { get; set; }

        public string? Name { get; set; }

        public string? Lastname { get; set; }

        public string? Title { get; set; }

        public string? NameSuffix { get; set; }

        public string? NamePrefix { get; set; }

        public string? NamePrefix2 { get; set; }

        public string? Email { get; set; }

        public DateTime? ValidFrom { get; set; }

        public DateTime? ValidTo { get; set; }

        public string FullName => Name + " " + Lastname;
    }

    public class UserModel
    {
        public string? Nik { get; set; }

        public bool IsActive { get; set; } = true;

        public bool IsInEditMode { get; set; } = false;

        public string? Name { get; set; }

        public string? Lastname { get; set; }

        public string? Salutation { get; set; }

        public string? Title { get; set; }

        public string? NameSuffix { get; set; }

        public string? NamePrefix { get; set; }

        public string? NamePrefix2 { get; set; }

        public string FullName => Name + " " + Lastname;
    }
}

[Tyme-Bleyaert]

Yes, this is something I encountered as well.
If I remember correctly you could use OptionValue as workaround so maybe in your case @Prodigio OptionValue="(x) => x.FullName".
I would assume we would use a default comparer or a reference equals (for reference types) for selecting a value by default.
If Denis would be busy, I also would gladly take a look at this.

[MarvinKlein1508]

@Tyme-Bleyaert great! :)

Since I have tracked this down to the ListComponentBase this might be related to #4103 as well. Because the FluentSelect is also using the same base class.