How do I pre-populate the chips on a BitDropdown?

[artinzamani]

Hi everyone.

I have a created a component based on BitDropdown.

It is basically an input for assigning users to a role. The input is Virtualized and is set to show the items as Chips. The user can search the user repository using an ItemsProvider, and optionally add users to this input.

It works perfect when I'm creating a new role, which is to say when starting from an empty user list. The new items get added (or removed) without any problem.

However, when I try to open an existing role with existing users, the chips for the existing items doesn't show up in the input, even though they exist in the Values collection.

I took a look at the source code, and I'm guessing the problem is that the existing Values are not in the _selectedItems, but I found no way of externally adding existing items to that collection.

Here's the partial snippet of my component:

<BitDropdown @bind-Values="Users"
             Virtualize MultiSelect Chips Combo
             ShowSearchBox ShowClearButton
             ItemsProvider="SearchAsync"
             OnValuesChange="async() => await UsersChanged.InvokeAsync(Users)"
             TItem="BitDropdownItem<BiLdapUser>" TValue="BiLdapUser" />

@code {
    [Parameter]
    public IEnumerable<BiLdapUser> Users { get; set; } = [];
    [Parameter]
    public EventCallback<IEnumerable<BiLdapUser>> UsersChanged { get; set; }

    private bool IsValidQuery(string? queryTerm) =>
        !(string.IsNullOrWhiteSpace(queryTerm) || queryTerm.Trim().Length < 3);

    private async ValueTask<BitDropdownItemsProviderResult<BitDropdownItem<BiLdapUser>>> SearchAsync(
        BitDropdownItemsProviderRequest<BitDropdownItem<BiLdapUser>> request)
    {
        try
        {
            if (!IsValidQuery(request.Search))
            {
                return BitDropdownItemsProviderResult.From(new List<BitDropdownItem<BiLdapUser>>(), 0);
            }
            
            var people = await Ldap.QueryUserAsync(request.Search, searchBase: LdapBase.DkUsers);
            var items = 
                from p in people
                select new BitDropdownItem<BiLdapUser>
                    {
                        Text = $"{p.Name} | {p.Title}",
                        Value = p
                    };
            var itemList = items.ToList().AsReadOnly();
            return BitDropdownItemsProviderResult.From(itemList, itemList.Count);
        }
        catch
        {
            return BitDropdownItemsProviderResult.From(new List<BitDropdownItem<BiLdapUser>>(), 0);
        }
    }

Any ideas what I can do to fix this?

Any help would be greatly appreciated.

[msynk]

@artinzamani Thanks for contacting us.

I've reviewed the source code you provided and couldn't find anything wrong with it. Could you please create a working sample so I can review it further? A GitHub repo is the best format for these types of reviews.

[artinzamani]

@msynk Thanks to you for responding.

I have created a minimal repository showcasing the issue that I'm having.

I've initialized a BitDropdown with two sample values, but their chips don't appear in the list. The chips that are added interactively are ok though.

Here's the repo:
https://github.com/artinzamani/bitchips

[msynk]

thanks for providing the sample repo. I think I understand what the problem is.
the issue is we are expecting the value of the Values parameter to always be part of the items of the component which is not correct when the ItemsProvider is used since not all of the items are available for the Dropdown in this case.
I'm going to investigate this issue a little more and will file a new issue for it soon.

[artinzamani]

Thanks for taking the time to investigate this. It is much appreciated.

[msynk]

just remember, since we don't have access to the actual item in this state, we won't be able to render a proper item for it, the only thing we have is the value and we will use it as the text of the item too.
a better solution should be adding a new feature to provide the default selected items instead of values for when an ItemProvider is set.

[msynk]

btw, it's a good practice to always load the selected items alongside of other items from the server.

[artinzamani]

You're definitely right, it'd make sense for the client to fetch the selected-items when instantiating the component in such scenarios.
Personally I prefer to be able to provide the BitDropdownItems for the pre-selected options rather than relying on their string representation for the chip labels.