fix: "duplicate" items in FluentAutoComplete

[MarvinKlein1508]

🐛 Bug Report

FluentAutoComplete adds "the same" item twice when selected. Although the dropdown menu shows that the item has already been added. This happens when you create a new instance of the search results with the same data.

In my real app this is happening because I fetch new rows from the database everytime with Dapper.

💻 Repro or Code Sample

For IssueTester:

<FluentAutocomplete TOption="MyUser"
                    Label="Users"
                    Class="w-100"
                    Placeholder="Name"
                    OnOptionsSearch="@OnSearchUserAsync"
                    OptionText="@(item => $"{item.Username}" )"
                    @bind-SelectedOptions="Input.Users" />

@code {
    public MyInput Input { get; set; } = new();   
    public class MyInput
    {
        public IEnumerable<MyUser> Users { get; set; } = [];
    }

    public class MyUser
    {
        public int UserId { get; set; }
        public string Username { get; set; }
    }

    private async Task OnSearchUserAsync(OptionsSearchEventArgs<MyUser> e)
    {
        var users = new List<MyUser>
        {
            new MyUser { UserId = 1, Username = "Alice Wonder" },
            new MyUser { UserId = 2, Username = "Marvin Klein" },
            new MyUser { UserId = 3, Username = "Vincent Baaji" },
        };

        e.Items = users;
    }
}

🤔 Expected Behavior

I expect the control to remove the first entry because it is already been added. Somehow the component already knows that this item is part of the component because the drop down menu shows it as already added.

😯 Current Behavior

You can add the same item unlimited times.

💁 Possible Solution

Maybe use the SelectedOption EventCallback to determine if an item is already part of the list and prevent the add then.

🌍 Your Environment

• Browser Mozilla Firefox latest version
• .NET and Fluent UI Blazor library Version .NET 9.0.5 and 4.11.9

[dvoituron]

If you create a new Items list each time, the item references are not the same. You need to update your code to avoid that.

[MarvinKlein1508]

@dvoituron I can't they will be fetched from SQL on search. I'm not using EF here. There must be some way because the dropdown also indicates that the item is already part of the list

[MarvinKlein1508]

@dvoituron @vnbaaij I'm able to fix this by adding a new parameter to ListComponentBase

/// <summary>
/// Gets or sets the function used to determine if an option is already added to the internal list.
/// The first parameter is the item from the internal list to check and the second parameter is the actual selected item from the menu.
/// </summary>
[Parameter]
public virtual Func<TOption, TOption, bool>? OptionComparer { get; set; }

I can use this then in:

protected virtual async Task OnSelectedItemChangedHandlerAsync(TOption? item)
{
    if (Disabled || item == null)
    {
        return;
    }

    if (Multiple)
    {
        if (_selectedOptions.Contains(item))
        {
            RemoveSelectedItem(item);
            await RaiseChangedEventsAsync();
        }
        else if (OptionComparer is not null && _selectedOptions.FirstOrDefault(x => OptionComparer(x, item)) is TOption addedItem)
        {
            RemoveSelectedItem(addedItem);
            await RaiseChangedEventsAsync();
        }
        else
        {
            AddSelectedItem(item);
            await RaiseChangedEventsAsync();
        }
        if (!Equals(item, SelectedOption))
        {
            SelectedOption = item;
        }
    }
    else
    {
        if (!Equals(item, SelectedOption))
        {
            SelectedOption = item;
            InternalValue = GetOptionValue(item);
            await RaiseChangedEventsAsync();
        }
    }
}

In my example I can provide a method to check if the option has already been added:

<FluentAutocomplete TOption="MyUser"
                    Label="Users"
                    Class="w-100"
                    Placeholder="Name"
                    OnOptionsSearch="@OnSearchUserAsync"
                    OptionComparer="IsOptionAdded"
                    OptionText="@(item => $"{item.Username}" )"
                    @bind-SelectedOptions="Input.Users" />

@code {
    public MyInput Input { get; set; } = new();   
    public class MyInput
    {
        public IEnumerable<MyUser> Users { get; set; } = [new MyUser { UserId = 1, Username = "Alice Wonder" }];
    }

    public class MyUser
    {
        public int UserId { get; set; }
        public string Username { get; set; }
    }

    private bool IsOptionAdded(MyUser listItem, MyUser selectedItem)
    {
        return listItem.UserId == selectedItem.UserId;
    }

    private async Task OnSearchUserAsync(OptionsSearchEventArgs<MyUser> e)
    {
        var users = new List<MyUser>
        {
            new MyUser { UserId = 1, Username = "Alice Wonder" },
            new MyUser { UserId = 2, Username = "Marvin Klein" },
            new MyUser { UserId = 3, Username = "Vincent Baaji" },
        };

        e.Items = users;
    }
}

Let me know what you think about this approach. It would make my life so much easier because right now I'm ignoring all userIds in my search query which have already been added to my list. But this approach here also allows the user to remove it again even from different instances.

If you both agree then I'm going to create a PR for this and add another demo + unit test.

[vnbaaij]

Think this is a good solution. Listbox supports multiple as well (in theory that is). You should check what the consequences are on this with your PR.

[MarvinKlein1508]

@vnbaaij this shouldn't have any impact on Listbox at all since this can only occur within FluentAutocomplete because this is the only component where you can get different items with the OnOptionsSearch parameter.

I would still add the OptionComparer to the base class just in case you want to add dynamic search features to more components and then we don't have to override the OnSelectedItemChangedHandlerAsync method in FluentAutocomplete