SearchAutocomplete

[dannify]

SearchAutocomplete is essentially a ComboBox without the dropdown button. It is commonly seen as a search input or dynamic search. Because SearchAutocomplete will implement the Collections API (both static and dynamic), adding it as a variant to the existing SearchField would cause unnecessary bloat for those with simple usecases.

SearchAutocomplete consists of a SearchField and a Popover Listbox.

Example

<SearchAutocomplete label="Search">
  <Item>Foo</Item>
  <Item>Bar</Item>
</SearchAutocomplete>

<SearchAutocomplete label="Search">
  {(item) => <Item>{item.name}</Item>}
</SearchAutocomplete>

API

interface SearchAutocompleteProps<T> extends CollectionBase<T>, SearchFieldProps {
  menuTrigger: 'focus' | 'input',
  isQuiet: boolean,
  direction: 'bottom' | 'top',
  shouldFlip?: boolean,
  loadingState: LoadingState,
  onLoadMore?: () => void,
  onSubmit?: (value: string, key: Key | null) => void,
  disabledKeys?: Set<Key>
}

Implementation

To start with we want to only use the autocomplete with the SearchField, therefore it makes sense to add it to the @react-spectrum/searchfield package. In addition, much of the internals for autocomplete will come from the combobox package so we will need to export those needed pieces. In the future, we hope to add autocomplete to other components beyond SearchField.

We will be creating a generic autocomplete component, however it will not be public. This internal generic autocomplete component will need to accept an input element (SearchField) and because of our react spectrum mobile solution, a “fake” input that is actually a button that opens the Tray similar to ComboBox.

For the react aria portion, there should be a useSearchAutocomplete hook that combines useComboBox and useSearchField.

Because a search field is more oriented around the search text and custom values rather than the keys of the items, selectedKey/onSelectionChange will not be supported. For cases where users want to know which key was specifically selected, the onSubmit callback will receive the key in addition to the search text. Additionally, SearchAutocomplete will always allow custom values.

Accessibility open questions

• The role of the SearchField - role="searchbox" or role="combobox"? aria-autocomplete is allowed on both roles, but we should research/test whether it is supported and works well across screen readers.

🧢 Your Company/Team

RSP