[bug] When input is focused, clicking again on it result in weird behavior

[vvo]

Hi there:

• on this example: https://react-select-search.com/?path=/story/single-select--search
• when the input is focused
• when you type something
• if you click again the input
• then the component is in a weird state
• its content is removed and it seems focused but typing in it will lead to nothing (as if typing was happening in a different input)
• on my own application, it also seems like clicking on the already focused input removes the "has-focus" CSS classes
• This is happening on all browsers, not just mobile

See:

PS: Sorry for opening so many (3) issues, I enjoy your component and I am close to having a very nice behavior, see:

[tbleckert]

@vvo Don't be sorry for the issues ✌️ really appreciate the testing and reporting. Had a computer free July but back in business now and going through it all. This should be a quick fix

[vvo]

Thanks for your reply :) Feels good to be computer free from time to time!

[mazondo]

fwiw, this is similar to an issue I hit, reproduction is:

• Click on searchable dropdown, select an item from the list
• Click on the resulting item's text in the input field
• selecting items no longer works unless you re-click on the input field

This is reproducible on the storybook examples as well. The solve for me was the following on a renderValue:

useEffect(() => {
    if (search && snapshot.focus && ref.current) {
      ref.current.focus();
    }
  }, [snapshot.focus, search, ref.current])

Not sure it's the best fix, but it also resolves this reported issue. You need to make sure your renderValue is using forwardRef.