Custom Dropdown/Select

Description

Create a custom, keyboard compliant dropdown/select component with search capabilities.

Problem Statement/Justification

• Most designs and apps need a more dynamic select component, such as react-select.
• I needed to create a custom Select component, while using Chakra-UI’s infra and system utils, hooks. Referencing the Menu component, I added optional search to filter out the listed options, the DescendantsContext for keyboard focus management, along with custom SelectOptions for rending labels and optional icons, etc.

Proposed Solution or API

I found the react-select format much more versatile in terms of controlling and rendering data.

Select will render and array of OptionTypes.

export type OptionType = {
  icon?: string;
  label: string;
  value: string; 
}

Example usage:

function SelectUsage() {
  const [state, setState] = React.useState(null)
  const options = [
    { label: 'Green', value: 'green' },
    { label: 'Green-Yellow', value: 'greenyellow' },
    { label: 'Red', value: 'red' },
    { label: 'Violet', value: 'violet' },
    { label: 'Forest', value: 'forest' },
    { label: 'Tangerine', value: 'tangerine' },
    { label: 'Blush', value: 'blush' },
    { label: 'Purple', value: 'purple' },
  ]
  return (
    <>
      <Select
        isSearchable
        defaultValue={options[0].value}
        value={state}
        options={options}
        onChange={(value) => setState(value)}
      />
    </>
  )
}

• container SelectDescendantsProvider, SelectProvider & StylesProvider
• Select consumes four internal components, each with its relative context.

<SelectContainer />
  <SelectInputValue />
<SelectList />
   <SelectOption />

Alternatives

• Structure: maybe moving the components out of the context, leaving the developers more control of the general structure of the elements? I found this be more difficult in terms of controlling data.

<Select>
  <SelectContainer>
    <SelectInputValue /> // handles current state, and search state
  </SelectContainer>
  <SelectList>
    <SelectOption label="Green" value="green" />
    <SelectOption label="Red" value="red" />
    <SelectOption label="Yellow" value="yellow" />
    <SelectOption label="Blue" value="blue" />
    <SelectOption label="Black" value="black" />
  </SelectList>
</Select>

Additional Information

• current component development

https://user-images.githubusercontent.com/19299064/124046312-e5fd3880-d9ce-11eb-8938-25b946a9cfd9.mov

[csandman]

I made a chakra wrapper for react-select recently, if anyone else is looking for something like this! https://github.com/csandman/chakra-react-select

[anubra266]

You could check out choc autocomplete.