Select, multiselect and autocomplete

[pomfrida]

The devil is known by many names..

We need to agree on a strategy moving forward on our select component.
This topic should be discussed here to avoid any future misunderstandings.

[wenche]

Challenge

1. The native HTML <select> is not possible to style across different browser, this goes especially for the <option>. Some also think is is hard to use the multiselect feature. On the other hand it works very well on mobile, as the platform native variant for selects are generally considered good.

2. The way Select/Multiselect/Autocomplete/Dropdown/WhateverYouCallIt is defined and implemented across other component libraries varies to a large degree

3. Some libraries still support the "native" functionality like filter on type without even opening the options, and adds features like search or multiselect with checkboxes on top of that. Others don't or they support a partial feature set.

4. With custom selects, it's hard to get accessibility support correct.

[wenche]

Challenge within Equinor

The way this component is used varies from simple selects with a few options to selects with hundreds of options and the need to quickly select multiple options. For the initial EDS component/s we need to set a line for supported functionality somewhere.

[wenche]

Initial approach

Our initial approach is to use the same split as Material UI:

• Select (a simple component meant to be interchangeable with a native <select> element)
• Autocomplete (a more feature rich variant with search)

We suggest to start with the simple Select component, and do a spike with the react-aria library to see if that library help us to create a accessible component with some custom styles and functionality.

[wenche]

We have decided to create a simple native select as the very first version. :)

[wenche]

We have released a version with a NativeSelect. This will be a good option especially for interfaces that target multiple devices.

We will soon release SingleSelect and MultiSelect components as well. This is v1 for single and multi select. As this is pretty complicated stuff, we don't want to make the scope too big. Known limitations:

• If the options are an array of object, you'll need to handle a string representation of that outside of Select and MultiSelect
• Due to ARIA complexity, this version don't provide an indeterminate checkbox "Select all"
• In a multi select with lot's of options, it might be difficult to quickly get an overview of the selected items.

The components are built using Downshift's hooks library. For more complex use cases it might make more sense to provide the building blocks (Input, Button, Label, List) as separate components, and let users combine them with downshift hooks themself 🤷‍♀️