Select

Select is an input component to select a value from an option list.

Example

Basic Usage

An icon button can be used to trigger dropdown selection too.

Customization, Option Groups, and Other States

Unlike Ant Design’s Select, Coral’s Select supports SelectOption to be rendered anywhere inside SelectList, but you need to provide index prop if they are not directly under it.

This flexibility allows you to achieve more customizable rendering like option groups.

Ellipsis Tooltip

You can use SelectEllipsisTooltip to achieve similar result with EllipsisTooltip. There are 2 main differences. Firstly, SelectEllipsisTooltip will position the tooltip on the right in the SelectList, and top in SelectButton or SelectSearch. Secondly, SelectEllipsisTooltip is capable of retaining focus, which is crucial to ensure that the component remains unaffected when it is clicked.

By default, number of lines to ellipsis is 2. You can customize it by specifying maxRows prop.

Select Tooltip

You might need more flexibility than what is offered by SelectEllipsisTooltip. For these cases, you can use SelectTooltip. SelectTooltip is also capable of retaining focus, making it interactable without affecting the main component.

Play around with the examples below (hover, click, etc) to understand the difference between Tooltip and SelectTooltip.

onChange vs onSelect

As the name of the callback suggests, onChange is only called when the value changes. For example, if the current value is 1, selecting 1 will not trigger the callback.

On the other hand, onSelect is triggered whenever an option is selected - either mouse click or keyboard enter. This callback can be helpful to create select again to deselect behaviour.

Search

You can replace SelectButton component into SelectSearch. But note that you should not pass value and onChange props to SelectSearch. Instead you should pass it to Select as searchValue and onSearch prop. Also, you should never use both SelectButton and SelectSearch in the same Select component.

Regarding the list of options, Coral’s Select doesn’t handle your search result - which in most cases makes customisations much easier. Simply render SelectOption whatever (e.g. .filter()) and whenever (e.g. api call) you want.

Customize selected option rendering in input box

By default, SelectSearch and SelectButton will render the same DOM element under selected option. You can customize it through children prop.

Async Search

Since Coral’s Select doesn’t handle search results. As a result, it can avoid fairly confusing callbacks like in React Select to accomplish async options.

SelectList Width

SelectList accepts optional width prop, which defaults to ‘auto’ meaning it will adjust with the button or input element width. You can also pass a number to this prop or simply style through css should also be fine.

Then, why is this prop provided if I can just style it through css to override it? Answer: so that you can always go back to ‘auto’ after a certain component composition uses a number width.

Controlled isOpen

Customizing Arrow Icon

You can also customize the dropdown arrow by providing rightElement prop to the SelectButton or SelectSearch. By default, there’s no clear icon on selection, you can pass clearable prop to SelectArrowIcon like so:

Virtualized

To optimize rendering large data, you can use SelectVirtualizedList. This component integrates SelectList with react-virtual. Coral uses react-virtual instead of more popular libraries like react-virtualized or react-window because react-virtual exposes the API as a hook and easier to integrate with Coral components that already has markup and styles.

Note that this component list has a tradeoff from the more commonly used SelectList:

• Must have a predefined height, by default is 36. Set it through itemSize prop.
• Cannot have a nested or non-direct SelectOption.

You can also use both SelectVirtualizedList and SelectSearch like so:

Empty List Placeholder

When children is falsy (empty list, null, undefined, false), SelectList and SelectVirtualizedList will show a placeholder instead. You can customize the placeholder by specifying emptyPlaceholder prop, and default to “No Data”. To not show any placeholder, you can pass null to this prop.

Adding Tooltip Example

Accessibility

Try playing around with Arrow Down, Arrow Up, Escape, Enter when popup opens or closed. Select and any other wrapping components (e.g. MultiSelect) have exceptionally complex keyboard accessibility.

If you’re interested, carefully explore Chrome URL Bar behaviours on both keyboard and mouse interactions.

References

• WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
• The Roles Model - Listbox: https://www.w3.org/TR/wai-aria-1.0/roles#listbox
• React Select: https://react-select.com
• Reach UI’s Combobox: https://reacttraining.com/reach-ui/combobox/
• Downshift: https://downshift.netlify.com/
• Ant Design: https://ant.design/components/select/#components-select-demo-search

API

Select

SelectArrowIcon

SelectButton

SelectEllipsisTooltip

SelectHighlighter

SelectIconButton

SelectList

SelectListFooter

SelectListSearch

SelectOption

SelectSearch

SelectTooltip

SelectVirtualizedList