lucid icon indicating copy to clipboard operation
lucid copied to clipboard

Autocomplete better support for async suggestions

Open ogupte opened this issue 8 years ago • 2 comments

The Autocomplete component was optimized for known suggestions but it needs to have better support (like loading indicators) for suggestion which are backed by an async API

ogupte avatar May 25 '16 17:05 ogupte

Here are a couple of issues/potential QoL improvements I've noticed when implementing lucid's autocomplete with async suggestions.

  • Enter inside of textinput doesn't fire a 0 index selection when there is an exact match on a suggestion. This functionality has to be embedded inside of onChange.
  • Default logic for DropMenu onCollapse behaves oddly when swapping out suggestion lists.
  • onSelect fires an onChange before the onSelect. This potentially creates a useless api request. There doesn't seem to be a way of overriding this functionality through props.
  • Some way to tune debouncing onChange?
  • No suggestions loading indicator
  • Suggestions prop is a flat array of strings. I image most api backed autocompletes will translate the selection from the name string to an ID. This means that the app now has to track an array for the suggestion strings and an array of the api objects separately. It could be nice if it also accepted an array of objects coupled with a display key, or formatter function.
let mySuggestionsFromApi = [{id: 1, name: 'foo'}, {id:2, name: 'bar'}];
//...
suggestions={mySuggestionsFromApi}
suggestionFormatter={(suggestion) => {suggestion.name}}
onSelect={(index) => {
  goStoreTheIdOfMySelection(mySuggestionsFromApi[index].id);
}}

ghost avatar May 25 '16 18:05 ghost

On hold until UX can resolve patterns around filtering/selecting/searching

strunkandwhite avatar Jun 22 '16 21:06 strunkandwhite