Input.Select

General Info

There is so much in place when talking about Select component aka Dropdown. So much different use-cases, different visuals, different behaviours.

User stories:

1. When user clicks (or using the keyboard) on some trigger area, some list of items appears
2. When user clicks outside, list hides
3. When user hovers/changing focus on items in list, they appears focused
4. When user presses up/down, the next/previous list item gets highlighted/focused
5. When user clicks an item in the list, different things can happen:
   • If the item was selected and this is single select component, do nothing
   • If the item was selected and this is multi select component, unselect the item
   • If the item was not selected before and this is single select component, select the item, close the Dropdown
   • If the item was not selected before and this is multi select component, select the item

Contexts (where the component can live):

1. Inside a form
2. Standalone component

One component simply can't deal with all that complexity. Or can it?

Architecture

1. OnChange and value
2. Customizable reducer (inner behavior)
3. Customizable renderers (visuals)

OnChange and value

value of the Input.Select is always an array of objects, which corresponds to the options you provided to the component. The onChange will be called with the new value, again, an array of selected options. This allows to have the same api for multi- and single- selects.

Behavior:

To be able to manage that complexity, the reducer pattern is used in this component. Everything is managed through 1 reducer, which is available through Input.Select.defaults.reducer. Also, default initialState is available through Input.Select.defaults.initialState.

You can easily redefine this reducer, for example to do multiselect:

() => {
  const actionTypes = Input.Select.defaults.actionTypes
  // useCallback used just to memoize reducer
  // usually you want to place this code outside of your render function
  const multiselectReducer = React.useCallback((state, incomingAction) => {
    if (incomingAction.type === actionTypes['Select.SelectValue']) {
      return {
        ...state,
        value: [...state.value, incomingAction.payload],
      }
    }
    if (incomingAction.type === 'Select.DeselectValue') {
      return {
        ...state,
        value: state.value.filter(x => !Object.is(x, incomingAction.payload)),
      }
    }
    return Input.Select.defaults.reducer(state, incomingAction)
  }, [])
  return (
    <Input.Select
      reducer={multiselectReducer}
      options={[{ label: 'First', value: 1 }, { label: 'Second', value: 2 }]}
      label="Multiselect"
      width="300px"
      placeholder="Select account"
    />
  )
}

Renderers:

FormField

SelectedValue

List

ListItem

You can redefine SelectedValue, List and ListItem renderers using

components

prop.

Every renderer has type:

(props, ref) => JSX.Element;

⚠️ You must assign ref to the corresponding node, otherwise you will lose focusing feature

Example:

() => {
  const ListItemRenderer = React.useCallback(
    (props, ref) => (
      <div ref={ref} tabIndex={-1}>
        Hey there {props.index}
      </div>
    ),
    [],
  )
  return (
    <Input.Select
      components={{
        ListItem: ListItemRenderer,
      }}
      options={[{ label: '1', value: 1 }, { label: '2', value: 2 }]}
    />
  )
}

You can also hide FormField with

noFormField

prop, but then you need to redefine SelectedValue renderer

Example:

() => {
  // useCallback used just to memoize renderer
  // usually you want to place this code outside of your render function
  const SelectedValueRenderer = React.useCallback(
    (props, ref) => (
      <button ref={ref} tabIndex={-1}>
        Click to open
      </button>
    ),
    [],
  )
  return (
    <Input.Select
      components={{
        SelectedValue: SelectedValueRenderer,
      }}
      noFormField
      options={[
        { label: 'First item', value: 1 },
        { label: 'Second item', value: 2 },
      ]}
    />
  )
}