0

I 've created autocomplete suggested input field, with debounce hook, only one issue left, is close drop-down when I select item or click outside? And what is the best solution to show selected item, show it in input value on create some 'redableRenderValue'.

Current behavior : when I click enter or on item itself the drop down close and reopen again Expected value: close on blur , close on enter and close on select item https://codesandbox.io/s/usedebounce-ncq2n

Palaniichuk Dmytro
  • 2,943
  • 12
  • 36
  • 66
  • Possible duplicate of [Detect click outside React component](https://stackoverflow.com/questions/32553158/detect-click-outside-react-component) – Javad Khodadadi Oct 07 '19 at 12:17
  • I made some changes in your code as mention in my answer below and working fine on my side, if this will not help i can share the whole `index.js` file to you, then you can make a try. – Abhishek-Saini Oct 07 '19 at 12:52

1 Answers1

1

Try this:

const [showSuggestions, setShowSuggestions] = useState(true); //make useState initial value to true instead of false.

and, delete below code from useEffect

setShowSuggestions(true); //delete this line from your code

also alter here:

<input
    type="text"
    placeholder="Find"
    onChange={e => setSearchTerm(e.target.value)}
    onClick={onInputClick} //add this attribute
    onKeyDown={onKeyDown}
    // onBlur={onBlur}
    value={searchTerm}
    autoFocus
/>

and a corresponding function to call:

const onInputClick = () =>{
    setShowSuggestions(true);
}

and Run your code.

I try it this will be working fine by doing this. Hope this will help you to.

Abhishek-Saini
  • 733
  • 7
  • 11