[HxMultiSelect] - Filtering and/or searching

[bholbrook]

The current HxMultiSelect is great but when the list contains a large number of items it can be difficult or slow to scroll and find the specific item you're looking to select.
If the component could be modified to allow typing to filter the displayed items, I think it would greatly improve the flexibility and usefulness of the component.

Perhaps something like how the Bootstrap 5 DataList functions, but with a multi-select: https://getbootstrap.com/docs/5.0/forms/form-control/#datalists

[hakenr]

(This is probably for HxAutosuggest to support multiple items selection.)

[bholbrook]

Would it be worth modifying the existing HxAutosuggest noting that we'd likely need a few different new multi-select properties just for this new functionality, or would it be better to create a new HxMultiSelectAutoSuggest?

[hakenr]

Probably a new component derived from HxAutossuggest would be needed.
Anyways thanks for the feature request. We already heard that request from other users.
Currently, it is not on our list of priorities, but will keep it in the backlog.

[bholbrook]

I've been attempting to build a new HxMultiSelectAutosuggest component utilising the core logic from the HxAutosuggest and have been making some progress but for at least the way I'm envisioning this component working I think it does make more sense to be something like a HxFilterMultiSelect.

My requirements and what I'm envisioning is a HxMultiSelect where the list is pre-populated with a pre-defined list of every available option, but then when you click on the dropdown and start typing it will start filtering down the available options in the dropdown list.
You'd be able to click or keyboard move through the items to select, and the filter would be removable through a clear X cross on the right-hand side of the input.
Once you clear the input the selected item text values will appear as a comma-delimited string, but regardless of the clear they'd still be 'selected' items.

Given the list is pre-populated and you're filtering down rather than searching in my eyes it makes more sense to base it off the MultiSelect.

What do people think?

[hakenr]

Do you want to cover a scenario, where there is a huge amount of possible items and you want to display just a few of them (= HxAutosuggest-like with DataProvider) or do you have a limited number of items you want to provide at once and just add the quick-filter functionality to HxMultiSelect (with Data)?

In case of HxMultiSelect, do you need the input to visualize the filter, or is just "scroll as you type` enough?

[bholbrook]

I'd have a limited number of items in the dropdown.
By default they'd all the selectable, but as you type it filters down the list to show only the items that contains the filtered text.
For example if I had a list that contained the words: Apple, Banana, Orange, Apple Juice, and if Banana was already selected at the start of the process...
As I start typing "Apple" then the available selectable items would show only Apple and Apple Juice as options.
If I then selected Apple then the list of selected items would contain Banana and now Apple.
I might then clear the filter and then see all items again, now with both Banana and Apple selected.

Edit:
To clarify your final question, it would be nice to visually see the filter you've typed as the list is being filtered, otherwise the user may not know what they're filtering on.
As an added bonus it would be cool if something like pressing ESC closes the dropdown and removes the filter.

[hakenr]

If you want to narrow the list of items only to "apples", you should probably somehow indicate there are more items already selected (the "banana" which is not visible now).

[bholbrook]

At least for my use case I wouldn't need to see the full list of currently selected items when filtering. It would be absolutely fine to have the input only show the selected items when the filter is cleared.

For example, with words Apple, Apple Juice, Banana, Orange, selected words Banana and Orange.

State one - No filter:
Input: "Banana, Orange"
Dropdown shows: Apple, Apple Juice, Banana, Orange

State two - Filter = "Apple":
Input: "Apple"
Dropdown shows: Apple, Apple Juice

So, when filtering it shows the filter, then when you clear the filter, it returns back to showing the selected items.
This would be perfect for my use case.

[hakenr]

Now I see HxMultiSelect displays the selected items in the input, it should be enough as indication there are selected items currently not listed.

[hakenr]

(Note for future: In case of large number of items, we might try to speed up the rendering by using Virtualize inside the drop-down.)

[bholbrook]

What HxMultiSelect does right now is absolutely perfect for everything except the filtering itself.
I was envisioning modifying (or building a new component) almost as a clone of the current HxMultiSelect, but that does this additional text filtering I've described.

Would you be comfortable me going down this route and trying to build this? Does that make sense to you?
If so, would you suggest a new component, or to extend the existing HxMultiSelect? Noting I'd likely need more parameters and funky logic to handle filtered items vs all items, etc.

[hakenr]

I'm considering enhancing the existing HxMultiSelect component. Here are some quick ideas:

1. Add a new parameter to make filtering optional. This will be disabled by default to ensure backward compatibility with existing projects.

2. Initially, filtering using TextSelector values should suffice. We can later introduce a FilterPredicate that takes the filter text and TItem as inputs and returns a boolean indicating whether the item should be included in the filtered list. For example:

   • FilterPredicate="(item, filter) => item.Name.Contains(filter)"
   • FilterPredicate="(item, filter) => item.Name.StartsWith(filter)"
   • FilterPredicate="(item, filter) => item.Name.Contains(filter) || item.AlternateName.Contains(filter)"

   The default predicate will be FilterPredicate="(item, filter) => TextSelector(item).Contains(filter)".

3. While updating the HxMultiSelect's implementation and visuals, we should also think about adding—or at least planning for—a "Clear Selection" button in the future.

@bholbrook, if you're interested in contributing to this component, your help would be greatly appreciated!

cc @crdo

[bholbrook]

@hakenr I've spent the weekend implementing the changes in a local branch (feature/HxMultiSelect-filtering) and would love to create a pull request for them.
How might I go about creating a pull request and contributing please?

[hakenr]

I guess this is what you are looking for...?
https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request-from-a-fork