Combobox: Alternative filter method for clr-option elements

[dorthrithil]

The problem

Currently the Combobox component filters the displayed clr-option elements by doing some substring matching using field. This works for the standard case where you are searching for a single property.

Imagine the following scenario: You have a list of users with firstname and lastname. You want to be able to find them using the combobox. Currently you can either search for firstname or lastname:

<clr-option *clrOptionItems="let user of users | async; field:'firstname'" [clrValue]="user">

vs.

<clr-option *clrOptionItems="let user of users | async; field:'lastname'" [clrValue]="user">

Solution proposal

Add a new input to clr-combobox that accepts a function that takes an object of T and returns a boolean corresponding to the filter result. True if the option should be shown, false if not.

Workaround

Add a new property for all users just to allow combobox searching: fullname = firstname + lastname.

<clr-option *clrOptionItems="let user of users | async; field:'fullname'" [clrValue]="user">

I don't really like this solution as you can get some false positives and other unexpected results. E.g. "John Doe" would also match to "j d".

[bbogdanov]

Hi @dorthrithil,

The team would advice you to continue with the workaround.

As we are focusing on bringing each Angular component to Core we froze @clr/angular for features but we will keep supporting and bug fixing until we move all components to Core.

Also with the Core implementation of the combobox we do not expect to get into this situation cause the Core components we do are stateless as possible and you will have the necessary control to reach your needs.