lucid
lucid copied to clipboard
Autocomplete better support for async suggestions
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
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 anonChange
before theonSelect
. 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);
}}
On hold until UX can resolve patterns around filtering/selecting/searching