Open richardscarrott opened 2 years ago
Funnily enough it can be reproduced on the first example on the react-autosuggest homepage:
Ok I've managed to hack in a fix (see line 143 in the codepen -- https://codepen.io/riscarrott/pen/zYdvpYm)
Basically I was right to say it's related to justClickedOnSuggestionsContainer
which is set when clicking anything other than the suggestion within the scroll container; I'm honestly not quite sure why this state is needed, if somebody has any background on it I can probably figure out an actual fix and send a PR but or now I'm doing this in my mousedown handler:
// Do this if you want to close and lose focus
// const closeAndBlur = () => this.autosuggest.input.blur();
// Or do this if you want to close and keep focus
const close = () => this.autosuggest.closeSuggestions();
close();
setTimeout(() => {
// Make sure `justClickedOnSuggestionsContainer` is set back to false
// otherwise you can't tab out of the input.
this.autosuggest.justClickedOnSuggestionsContainer = false;
}, 0);
I have a close button inside the suggestions container which, onMouseDown blurs the input in order to close the suggestions. It however breaks the ability to tab around inside the form; the user get's stuck in the autocomplete input.
Test in Chrome and Safari for Mac OS.
https://codepen.io/riscarrott/pen/zYdvpYm
EXPECT: Age input to be in focus ACTUAL: 'Language' input remains in focus; cannot tab out of 'Language' input without first blurring with mouse
I've not been able to get to the bottom of it as it's hard without stepping through the code but of course this causes it to blur, but I'm sure somebody with existing knowledge of the various events and state would have a good idea; my guess is it's something to do with the
justClickedOnSuggestionsContainer
state.