[AutoComplete] Race Condition on Remote Long Queries #10
Description
If you are using the autocomplete control with a remote endpoint to populate the results there can be a race condition if it takes your result some time to respond. See the example below with steps to reproduce
- Start typing into auto complete (the first char or first 2 char may be an expensive query)
- Continue typing until you get to 3 or 4+ chars where the query is much faster
- Wait
Expected Result
- The autocomplete should show the correct records for the given input
Actual Result
- The autocomplete shows the correct records
- After a brief amount of time it flashes to incorrect records for a query that was waiting
Root Cause
There is a race condition happening with the getRemoteResults invocation which overrides results. We should add some code to the callback (maybe promise handling) to drop requests if they are not the latest.
The problem has to do with this invocation and callback
getRemoteResults(input, (remoteItemsSource) => {
let results:HTMLElement[] = [];
for (let index in remoteItemsSource) {
let currentElement:HTMLElement = buildAutoCompleteItem(remoteItemsSource[index]);
results.push(currentElement);
}
hydrateAutocomplete(results);
});