New Select Component

[westwood846]

Let's collect the discussion here.

[westwood846]

https://github.com/based-ghost/react-functional-select

• Uses styled-components
• Small
• No groups
• Hard to style

[westwood846]

https://github.com/jedwatson/react-select

• Well-established
• Lots of functionality
• Easy to customize
• Big
• Uses Emotion

[westwood846]

https://github.com/downshift-js/downshift

• Actually not a component, more like a toolbox for building selects
• Popular
• Very minimalist: Still leaves a lot of work to us
• Maybe not easy to customize, but very flexible
• Small
• Unopinionated about styling library

[rosslo]

https://github.com/react-component/select

• ant-design select's base component https://github.com/ant-design/ant-design/blob/master/components/select/index.tsx#L6
• Unpacked Size: 267 kB
• Usage is very similar to current aries Select
• Zero style

[westwood846]

@rosslo @ritikamotwani I started collecting some (non-technical) requirements here: https://docs.google.com/document/d/18yPN0s17_vhNbIBPBHfQ0zFRtIGn81icPtAwVEmZeBE/edit?usp=sharing

This might help us with making our decision, and with implementation later. Please add requirements or participate in the discussion in the comments.

[westwood846]

By the way, just in terms of terminology, at Glints we seem to call this thing a "Select" and that's fine because everybody essentially knows what we mean. But online I've seen more nuanced terms:

• Combobox: We call this "Select". It's a single-line text input combined with some means to select one or more items that match the input. Examples: https://en.wikipedia.org/wiki/Combo_box, https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html, https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/grid-combo.html
• Dropdown List/Listbox/Select/Grid Popup: These are all variations of the same thing. A list where from which one or more items can be selected (without text input). Might be important to understand the difference between these. Examples: https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html, https://en.wikipedia.org/wiki/Drop-down_list, https://en.wikipedia.org/wiki/List_box

[ritikamotwani]

Points from the survey:

• Select - the online documentation assumes that the options are static, but in many of our use cases, we use Select as a searching mechanism and the options are dynamic. So I couldn't decide whether are we "abusing" Select or is it just a lack of examples.
• Workaround for cleaning up the Select's input value right after one option is selected. https://gitlab.glints.com/glints/glints-dst/-/blob/staging/app/modules/OnboardingGuided/JobPreferences/LocationField/index.tsx#L55
• Not passing value to Select to avoid it showing the value as the selected value. I want to be able to pass in the value and the Select should then display the corresponding label from the options.
• Have a multiple select
• Select. There were some issues when passed with a controlled value.