search

carbon-design-system / carbon-components-angular

An Angular implementation of the Carbon Design System for IBM.
https://angular.carbondesignsystem.com
Apache License 2.0
533 stars 307 forks source link

Filterable combobox resets the list after selection #969

Closed ncarvalho closed 4 years ago

ncarvalho commented 4 years ago

Detailed description

My team has implemented a filterable, multi-select combobox. After typing in the search box then selecting an option from the list, the filtered dropdown list resets and shows the original list. This becomes a pain point when trying to select multiple items in the filtered list. The user is then forced to filter the list again and then select another item, over and over.

This appears to be a bug with the angular version of this component. When comparing the React multi-select combobox (with the Filterable Knob selected) http://react.carbondesignsystem.com/?path=/story/multiselect--default, you can see the expected behavior. The list stays open to the filtered list instead of resetting. There is also a delete button that appears in the search box which is also another item the Angular component is lacking.

Currently working in Google Chrome Version 79.0.3945.88

Current Carbon Design System versions

"carbon-components": "10.5.1",
"carbon-components-angular": "3.15.2",

My team is currently working on IBM CustomerSuccess360. We are hoping to resolve this issue before our official launch mid-January.

Steps to reproduce the issue

Visit https://angular.carbondesignsystem.com/?path=/story/components-combobox--multi-select

  1. Enter "t" in the Filter... field
  2. Select one of the two options
  3. Notice the dropdown list reset to the original list.

Expected behavior

Visit http://react.carbondesignsystem.com/?path=/story/multiselect--default

  1. Navigate to the Knobs tab and select the Filterable (<MultiSelect.Filterable> instead of <MultiSelect>) checkbox to enable filtering.
  2. Enter "e" in the Filter... field
  3. Select the remaining option
  4. Notice the filtered dropdown list persists

Additional information

The behavior in the Angular example becomes a pain point when the dropdown list is long and causes the user to have to execute the search multiple times in order to select options that begin with the same few letters, like in the image below --

cs360-offering-filter
carbon-bot commented 4 years ago

:tada: This issue has been resolved in version 3.30.3 :tada:

The release is available on:

Your semantic-release bot :package::rocket: