sickdyd/react-search-autocomplete

When clicking with the mouse into the field, the autocomplete list shows only for a sec

Opened this issue · 7 comments

Describe the bug
When clicking with the mouse into the field, the autocomplete list shows only for a sec.
When tabbing into the field, the items are shown as expected, whereas when you click with the mouse, the values are only being shown for a second (you can hold the mouse button, then they will remain also)

Expected behavior
The list with the values stays open, until a value is selected, either by mouseclick, or by navigating with the arrows from keyboard.

@munichdeveloper I am unable to reproduce the issue, could you please create a codesandbox?

Same here!

I think what they're trying to say is that when showItemsOnFocus is set to true, the results only stay on screen for an instant before disappearing, they're supposed to stay on screen until the user clicks outside the input field
I'm facing the same problem.

Did anybody find a fix to this issue?

ZionLG commented

Have this issue as well

@sickdyd Greetings!
It's an amazing package you've built here an I really appreciate all the time and effort you've put into making this so awesome. It's better than most of the other search/autoccomplete packages I've tried.

The only issue I'm facing currently is that even with the showItemsOnFocus set to true, the result items only show of a short moment on click, as soon as the user releases the click, it disappears. Here's a codesandbox reproduction of the issue.

Recording.2024-01-11.101457.mp4

Thanks for your assistance

I found that the results stay until the mouse button is released.

I think this may be due the addition of handleDocumentClick instead of relying on onBlur. My guess would be that releasing the click on the input field counts as a document click and is interpreted as clicking anywhere in the document, leading to the result list being cleared.

https://github.com/sickdyd/react-search-autocomplete/blob/master/src/components/ReactSearchAutocomplete.tsx#L116-L125