Doublecheck the input length at the last moment

[duffyjp]

I've had issues where deleting characters in the input field faster than the server is responding to queries can leave old results on screen, even if the entire field is cleared. It largely occurs when holding the backspace key and releasing either exactly when no characters exist or while the count is < the minLength. The issue is most noticeable if your data-autocomplete-delay-value is set very low (mine is 11).

Things that didn't work:

• Add a timestamp in a new data attribute with Date.now() and verify the result being rendered is the newest based on when it started rather than was completed in async. They almost never came in out of order so that wasn't it.
• Remove the debounce entirely. Had no effect.

What did work:

• At the very last moment in replaceResults(html) double check the input length and if it's less than minLengthValue delete the innerHTML instead of replacing it.

Why it works (AFAIK):

• The input length was only checked before the query is dispatched. If while the query was being processed the user deleted enough characters to be under the minimum, but before the async stuff finishes it still gets displayed. You'll notice if watch really closely on the Before gif below that the results are removed correctly by onInputChange when characters are deleted but redisplayed by the async query when it finishes.

Example:

• data-autocomplete-min-length-value="3"
• data-autocomplete-delay-value="11"

Before	After

[netlify[bot]]

✅ Deploy Preview for stimulus-autocomplete canceled.

Name	Link
🔨 Latest commit	c12cc0045ebe7af95699c800c4d810c9d104c482
🔍 Latest deploy log	https://app.netlify.com/sites/stimulus-autocomplete/deploys/647e4ffc07a8800008a23f59