Keeping the filter active after selection in multiselect ComboBox.

[MartynasStrazdas]

Hi, I was wondering if it was possible to keep the filter active in MultiSelect ComboBox after an option was selected?

Screenshot for reference (Filter text is not being applied after selection):

[mayank99]

I think this could be achieved using controlled input state (i.e. inputProps.value), but it's not advisable, because:

• It could conflict with the ComboBox's internal state.
• It could also lead to a confusing user experience.

Could you share more details about your use-case that requires such functionality?

[MartynasStrazdas]

We want to limit the available options in the ComboBox to a maximum of X items. One proposed solution was to load all options into the ComboBox and apply a custom filter to limit the displayed items to the first X. However, in this approach, selecting an option reveals all items, instead of maintaining the X-item limit.

While the filter’s purpose isn’t to permanently limit the number of options, this seems like the closest built in option in my eyes. My goal was to avoid pre-limiting the ComboBox options because that would require constantly tracking and including the selected items and filtering the values before providing them.

P.S. we don't have all the options from the start and load them when we need them.

[grigasp]

@mayank99, don't you think it's a bug to show unfiltered items while the filter text is still there? Have a look at this capture from your demo site:

IMO, after selecting a value, either filter text should be cleared, or the options should be kept filtered. My preference would be the latter.

[mayank99]

Oh yes, this does look like a bug. The text should definitely be cleared (based on the current filter behavior). Thanks for reporting this; it wasn't clear from the original post that the text is being left over by default.

[grigasp]

The text should definitely be cleared (based on the current filter behavior)

But wouldn't it be more intuitive if the filter would stay as-is, including the filtered options list? What if I want to select multiple filtered items - do I have to re-enter the filter for each of them?..

[mayank99]

That's a good point too. We will discuss this in more detail internally and take action appropriately. It's possible that we'll need a new prop to allow switching between the two behaviors.

[r100-stack]

Oh yes, this does look like a bug. The text should definitely be cleared (based on the current filter behavior).

This bug has now been fixed in 3.15.4 🚀 i.e. ComboBox with multiple={true} properly clears its input value whenever the filter is cleared. e.g. when an option is toggled or the combobox is unfocused.

We will discuss this in more detail internally and take action appropriately. It's possible that we'll need a new prop to allow switching between the two behaviors.

The ability to support both behaviors is still a WIP (#2294).

[r100-stack]

The ability to support both behaviors is still a WIP (#2294).

The ability to support both behaviors is now released in 3.16.0 🚀 The behavior is controlled by the new clearFilterOnOptionToggle prop (docs).