[Combo box] Allow filtering or hide non-matching options

[shixiedesign]

Allow filtering (or hide non-matching options) for Combo box

Current

Right now combo box does not hide options that do not match user input text. To increase usibility, component should reduce the number of options when user input some text to only the matching ones.

Ideal state + justifications

Country selection is a common use case for combo box. Number of countries make the dropdown extremely long and difficult to use. Allowing type in + filtering helps to bring all the relevant options into view, hide all the other options. If there is no filtering in below example, users can miss out on the existence of other matching options below the fold.

Notice the blue text highlighting is a nice to have enhancement.

Research / academic backup

https://baymard.com/blog/drop-down-usability

[guigueb]

I think this one can be closed.
I'm not sure when shouldFilterItem was added but I think it will do what this enhancement is wanting.

/**

• Specify your own filtering logic by passing in a shouldFilterItem
• function that takes in the current input and an item and passes back
• whether or not the item should be filtered.
  */
  shouldFilterItem: PropTypes.func,

[tw15egan]

As @guigueb pointed out, it seems like this functionality has been included in ComboBox at least dating back to the beginning of the monorepo: commit

A possible future enhancement would be adding color highlighting to the filtered results, but I believe that should be captured in a new issue.