[RFC] Component - ComboBox[CB]

prasanna1211 commented 4 years ago

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

When we type:
- [x] The logic for suggested values can be overriden by a custom filter function.
- [x] The highlighted value can be selected using mouse / keyboard.
- [x] The results should be filtered and only the results that match the pattern (logically based on the filter function) should appear.
- [x] The first element on the filtered list (the most closest option) should be highlighted and be present at the top.
When we trigger dropdown:
- [x] A ghost of selected element should appear that should get cleared when we start typing.
- [x] By default all options should be visible when we trigger a dropdown to open state.
Keyboard Navigations as per keyboard Navigations section
Virtualized List The list must be scrollable, virtualized (preferably react-window)
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

Event	Behaviour
Escape	Dismisses the popup if it is visible. Optionally, if the popup is hidden before Escape is pressed, clears the combobox.
Enter	Accepts the focused element in the popover. Handle automcomplete's cursor
Alt + ↓	Focus is not lost, open pop up
Alt + ↑	Focus is lost, open pop up
Character	Types the character, opens popover and look for variation to what to happen?

Popup

Keyboard	Behaviour
Enter	Accepts the focused option close the popup, handle cursor of input.
Escape	Closes the popup & focus to the combobox. Optional clear the input.
Down Arrow	Focus and select next option cyclic?
Up Arrow	Focus and select next option cyclic?
Left Arrow	Focus to input without closing popup and handle cursor
Backspace	Returns focus to input and deletes last character
Delete	Returns focus to input and delete completely
Character	Look for variations to what to happen?

Further Improvements

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

navin-moorthy commented 4 years ago

Okay, I went through all the types of Combo-Box and their examples in WAI-ARIA practices. Aren't going to do the basic select where the Combo-Box is not editable just shows the listbox to select any option(like a native select)?

Like: A basic single select in https://react-select.com/home

react-select

sandeepprabhakaran commented 4 years ago

Happy to get on a call to describe the feature set I'm after.

sandeepprabhakaran commented 4 years ago

Features required: Ideal if we could achieve combobox + listbox behavior in a single component (ref downshift useselect) if not it's okay to have to components.

Definitely building 'dialog' variant.

Searchable
Autocomplete (by highlighting first result by default)
Clearable
API fetchable
Disabled
Multiselect
Keyboard shortcuts (basic)
Style-able / Composable with children
Grouping (LOW)
Creation if no result exists (LOW)
Focus on combobox input should show current value or default placeholder, onKeyPress should clear the existing value and start searching for 'key'

.....

navin-moorthy commented 4 years ago

@prasanna1211, I think you might have missed the Right Key navigation support.

Keyboard	Behaviour
Right Arrow	Focus to input without closing popup and handle cursor

https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html

navin-moorthy commented 4 years ago

See Material UI - https://material-ui.com/components/autocomplete/ They have better combo-box too.

navin-moorthy commented 4 years ago

Should we always need react-window to render the options? Like whatever be the no. of options. What if the no. of options are less than 10.

prasanna1211 commented 4 years ago

@navin-moorthy Not necessarily only if the results are large. Need to have a hard limit.

navin-moorthy commented 4 years ago

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

This is the default behavior of Popper, I guess we don't need to do anything for dynamic positioning.

navin-moorthy commented 4 years ago

@navin-moorthy Not necessarily only if the results are large. Need to have a hard limit.

Okay, got it.

prasanna1211 commented 4 years ago

@navin-moorthy Yes, our component should use Popper JS. That is the implication of that behaviour.

navin-moorthy commented 4 years ago

@navin-moorthy Yes, our component should use Popper JS. That is the implication of that behaviour.

Clear

timelessco / chakra-components