feat(multi-select): introduce filterable mode

[IgnacioBecerra]

Related Ticket(s)

#683

Description

Introduced a filterable variant of the Multi Select component that works as a ComboBox that filters and is able to select multiple options.

Changelog

New

• new filterable variant for bx-multi-select

[ibmdotcom-bot]

Deploy preview created for Carbon Web Components - Vue:
https://carbon-web-components-vue.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/716/index.html

Built with commit: 2c27977f6011435aed5fb76d10f4d1ab9d3f099a

[ibmdotcom-bot]

Deploy preview created for Carbon Web Components:
https://carbon-web-components.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/716/index.html

Built with commit: 2c27977f6011435aed5fb76d10f4d1ab9d3f099a

[ibmdotcom-bot]

Deploy preview created for Carbon Web Components - React:
https://carbon-web-components-react.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/716/index.html

Built with commit: 2c27977f6011435aed5fb76d10f4d1ab9d3f099a

[ibmdotcom-bot]

Deploy preview created for Carbon Web Components - Angular:
https://carbon-web-components-angular.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/716/index.html

Built with commit: 2c27977f6011435aed5fb76d10f4d1ab9d3f099a

[jeffchew]

Thank you @IgnacioBecerra!

It looks like some of the unit tests are failing:

[emyarod]

it looks like events continue to propagate after typing. In this screen recording you can see the storybook UI being toggled as I type T, and the multiselect menu does not stay open and filter while typing 1 for example

Screen.Recording.2021-10-26.at.9.26.54.AM.mov

[IgnacioBecerra]

@emyarod Seems like this can also be seen in the ComboBox component, seems like the 1 is a keyboard shortcut to focus on the Storybook component list sidebar. Tried using event.stopPropagation() but it seems that this shortcut takes precedence over the other functions and can't disable it. Maybe we could open another issue for this to investigate? The component works fine if opened in a new tab.

[emyarod]

@IgnacioBecerra I think we should be able to ignore storybook shortcuts given that the core Carbon filterable multiselect story doesn't run into this issue right?

I agree on opening a separate issue for the existing ComboBox web component, but for a new variant story I think we should resolve before merging if we can, what do you think? interested in hearing others' opinions as well

[IgnacioBecerra]

@emyarod I noticed that BXSearch also has this weird behavior while BXInput didn't. I tried to see what's the difference between these two components and kept adding/removing things, I decided to copy the BXInput code into BXSearch only to find out the behavior still occurred. I stripped down both components to only use an input element in the shadow DOM for both components, got rid of the CSS styles, and even modified the storybook files to be exactly the same... and the behavior is still there for BXSearch. Not sure what's going on lol

I opened a draft PR showing this behavior, and you can see the files are carbon ( heh ) copies of each other:
#717

[emyarod]

should we also add the stories to the React/Vue/Angular storybooks?

[emyarod]

one thing with Space selection, when there is an active cursor in the input we end up with some possibly unexpected behavior (the menu closes vs when no cursor is active)

Screen.Recording.2021-10-29.at.10.04.49.AM.mov

it looks like this behavior is present in the core component so we may need further guidance on what the expected behavior should be

[emyarod]

looks good to me!

[abdonrd]

@IgnacioBecerra @jeffchew seems like we need to add a new snapshot, right?