Definitition:

A Combo Box [CB] is an input widget with an associated popup that enables users to select a value for the combobox from a collection of possible values

Combo Box [CB] vs List Box [LB]

LB is simply a list of items, while a CB is a combination of a List box and an input that can be edited

Behaviours for Combobox v0.1

1. When we type:

• The logic for suggested values can be overriden by a custom filter function.
• The highlighted value can be selected using mouse / keyboard.
• The results should be filtered and only the results that match the pattern (logically based on the filter function) should appear.
• The first element on the filtered list (the most closest option) should be highlighted and be present at the top.

2. When we trigger dropdown:

• A ghost of selected element should appear that should get cleared when we start typing.
• By default all options should be visible when we trigger a dropdown to open state.

3. Keyboard Navigations as per keyboard Navigations section

4. Virtualized List The list must be scrollable, virtualized (preferably react-window)

5. Dynamic popup positioning The popup should be dynamically positioned based on the window size.

Functionalities

1. API Fetchable: Results should be populated from a resolved promise and ability to pick first few elements out of it

2. Clearable The selected should be clearable by clear icon (or) typing during input focus.

3. Disabled option state: Few options can be disabled.

Import

Component Parts:

• Combobox: The wrapper that provides the context and functionalities
• ComboBoxInput: The Input component to get user input in a text field.
• ComboboxList: The listbox that wraps the options. It provides the keyboard
• ComboboxOption: Each option in the select.

Usage

<ComboBox>
  <ComboBoxInput />
  <ComboBoxPopper>
    <ComboBoxList>
      <ComboBoxOption />
    </ComboBoxList>
  </ComboBoxPopper>
</ComboBox>

Props

ComboBox Props (Provides Context composed Box(div))

• multi
• value
• options
• onChange
• enableGhost
• size

ComboBoxInput with GhostSelected Props(composes Input)

• placeholder

ComboBoxPopper (composes Popper)

• placement
• skid
• gutter

ComboBoxList(Listbox) Props (composes React-Window List)

• React-Window Props
• itemHeight
• pageSize

ComboBoxOption Props (composes Box)

• styleProps

Keyboard navigations:

Edit Box

Popup

Further Improvements

• Support in forms
• Accessibilities
• Style variants
• Get the Promise instead of resolved promise for isAsync