Open ogupte opened 8 years ago
Here are a couple of issues/potential QoL improvements I've noticed when implementing lucid's autocomplete with async suggestions.
onChange
.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.onChange
?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
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