[Bug/Feature Tracker] ComboBox

[prasanna1211]

As per #52 , needs following features

General behaviours

• [x] Option needs to be composable (Custom renderer)
• [x] Tweak on closing popper when not needed (doubt)
• [x] Flickering with ScrollToItem after selecting an option
• [x] Check on the exact disabled state for the options in listbox like our current implementation or the react-select one. (Not possible with current use Select implementation and I think it is sufficient for now)
• [x] Backspace sometimes clears the input directly without deleting a single letter.(hard to reproduce but happens then and there)
• [x] Rethink custom renderers with Chakra's way

Async component

• [x] Async fetch - Fetch always or default option and fetch only while searching (Doubt)
• [x] After selecting the option in async - on next click it only show the previously fetched options - (Doubt)
• [x] Clarity on defaultOptions API
• [x] Input with custom renderer

Multiple Select

• [x] Rewrite styling to accommodate tags with input.

Custom Option

• [x] Having options as a renderItems

Rewrite Composition

• [x] Rewrite composition to have better control for multi-select and the ComboBox Options

<ComboBox
  value={fruit}
  options={options}
  onChange={() => {}}
>
  <ComboBoxInputGroup>
    <ComboBoxRightElement
      children={<Icon name="chevron-down" fontSize="1.5rem" />}
    />
    <ComboBoxClearElement />
  </ComboBoxInputGroup>

  <ComboBoxList
    renderItem={() => (
      <Box>
        // control for options
      </Box>
    )}
  />

[prasanna1211]

Adding a set of issues here.

First one being, I think list box shouldn't have close button.

[prasanna1211]

For pointer hover, cursor should be pointer for close button right ?

[navin-moorthy]

Adding a set of issues here.

First one being, I think list box shouldn't have close button.

As per the standard there is no close button for combo-box, it's part of UX I guess. May we can make it hide with props if they don't want or by default it will be hidden and can have it with props

[prasanna1211]

When the value is not a valid option's value, the component shouldn't break. Instead no option should be selected.

[prasanna1211]

Not a bug: A little confusion in behaviour of listbox. When we type then, choose the dropdown closes. If we type when it is still focused, the value changes. This happens in native select box too. But never seen it in the accessibility docs.

[prasanna1211]

In async while we type, pressing enter clears the text. Intended ?

[prasanna1211]

There are a few open source standards that we generally do, even at times when certain things are obvious to avoid breaking the code. These are done generally when typescript is not used.

1. Type check once, for every function by typeof x == 'function'. Example, this shouldn't be an error. Instead a default filter function should load.

2. Same way for all functions. I could see this being there in the source at few places. Should extend it everywhere.

[prasanna1211]

I think Pressing space bar when the input is empty needs a different behaviour. Currently it treats as a space which generally not used to be the case. react select, selects the first option when the dropdown is open and the space bar is pressed.

[navin-moorthy]

Closing this in favour of now individual issues being created.