fix(select): select dropdown should be collapsible with multi-select enabled

[zpeterson]

Pull Request

📖 Description

Make select component collapsible when multi-select (multiple attribute) is enabled.

Before


After


🎫 Issues

https://github.com/microsoft/fast/issues/6889

👩‍💻 Reviewer Notes

Please test the select component in Storybook and checkout the before/after gifs in the description.

📑 Test Plan

Tested in Storybook.

✅ Checklist

General

• [x] I have included a change request file using $ yarn change
• [ ] I have added tests for my changes.
• [x] I have tested my changes.
• [ ] I have updated the project documentation to reflect my changes.
• [x] I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

• [ ] I have added a new component
• [x] I have modified an existing component
• [ ] I have updated the definition file
• [ ] I have updated the configuration file

[scomea]

Shouldn't the display reflect the multiple selected values somehow? What should "value" be with multiple selections or is it only valid in single select mode?

[radium-v]

This breaks keyboard navigation. Opening/closing the listbox now conflicts with selecting/deselecting the currently checked option.

Just thinking out loud here: we may want to demonstrate how both the original behavior and the new behavior can be achieved with class overrides - it could make better sense to keep the original behavior, then override the methods via the select.register.ts module (which currently contains additional example logic regarding multiple and size).

[bheston]

I commented in the related issue, but I don't support this update. Components which allow for multiple selection should not hide the values selected, which is realistically the only way that can work within the constraints of the Select component. The Picker is designed for multiple values inherently and provides a better interface for working with them.

The general rule I find that's providing the best experience is to use Select for single-select options on a small list of non-dynamic choices like a list of four different sort columns. Any time the list is long enough to scroll or has named items (people, files, groups, etc.) where search is beneficial and/or multiple values may be selected should use Picker.

One of the updates I am going to propose for Picker is also a single-select mode to gain the benefits of working with a long list but in the case where only a single value is allowed.