Cannot tab out of input after closing suggestions

[richardscarrott]

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

1. Focus on 'Name' input
2. Type "Test"
3. Tab to 'Language' input
4. Click 'Close' button
5. Tab to 'Age' input
6. Tab back to 'Language' input (shift + tab)
7. Tab to 'Age' input again

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.

[richardscarrott]

Funnily enough it can be reproduced on the first example on the react-autosuggest homepage:

1. Focus on basic input
2. Type "C"
3. Click on suggestion container border (fiddly but possible)
4. Try to tab out EXPECT: To tab out ACTUAL: Stuck in input

[richardscarrott]

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);