Select/Dropdown/Autosuggest

Just opening the issue to put together some links/ideas/suggestions about this/these component(s).

• https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/combobox/aria1.1pattern/listbox-combo.html
• https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/listbox-collapsible.html
• https://uxmastery.com/anatomy-of-an-accessible-auto-suggest/
• https://pattern-library.dequelabs.com/components/selects
• http://haltersweb.github.io/Accessibility/autocomplete.html

Initial thought on API:

<Dropdown.Container>
  {dropdown => (
    <Block>
      <Dropdown.Input {...dropdown} />
      <Dropdown.ArrowButton {...dropdown} />
      {/* Maybe using Popover and Menu */}
      <Dropdown {...dropdown}>
        <Dropdown.Item>Item 1</Dropdown.Item>
        <Dropdown.Item>Item 2</Dropdown.Item>
      </Dropdown>
    </Block>
  )}
</Dropdown.Container>

EDIT: Update with v1 API

const listbox = useListboxState();
<Listbox {...listbox}>
  <ListboxItem {...listbox}>item 1</ListboxItem>
  <ListboxItem {...listbox}>item 2</ListboxItem>
  <ListboxItem {...listbox}>item 3</ListboxItem>
</Listbox>

const listbox = useListboxPopoverState();
<ListboxButton {...listbox} />
<ListboxPopover {...listbox}>
  <ListboxItem {...listbox}>item 1</ListboxItem>
  <ListboxItem {...listbox}>item 2</ListboxItem>
  <ListboxItem {...listbox}>item 3</ListboxItem>
</ListboxPopover>

const combobox = useComboboxListboxState();
<Combobox {...combobox} />
<ComboboxListbox {...combobox}>
  <ComboboxListboxItem {...combobox}>item 1</ComboboxListboxItem>
  <ComboboxListboxItem {...combobox}>item 2</ComboboxListboxItem>
  <ComboboxListboxItem {...combobox}>item 3</ComboboxListboxItem>
</ComboboxListbox>

const combobox = useComboboxListboxPopoverState();
<Combobox {...combobox} />
<ComboboxListboxPopover {...combobox}>
  <ComboboxListboxItem {...combobox}>item 1</ComboboxListboxItem>
  <ComboboxListboxItem {...combobox}>item 2</ComboboxListboxItem>
  <ComboboxListboxItem {...combobox}>item 3</ComboboxListboxItem>
</ComboboxListboxPopover>

[vvo]

I am using the Combobox in production: works well now 😃 Temporary documentation is at https://github.com/reakit/reakit/tree/master/packages/reakit/src/Combobox/

[diegohaz]

Hey @strass! I’m not sure if it’s the same design as yours, but I’ve created this example a few months ago: https://codesandbox.io/s/reakit-combobox-with-tags-smfgu

On the API, I imagine we could have a separate Tag component that could be combined with Combobox, like this: https://twitter.com/diegohaz/status/1337358924236939268