useEffect(() => {
//hide showSuggestion if the user clicked outside of the ref
const handleClickOutside = (event) => {
if (
searchSuggestionRef.current &&
!searchSuggestionRef.current.contains(event.target)
) {
setShowSuggestions(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [searchSuggestionRef]);
useEffect(() => {
//hide showSuggestion if the user clicked outside of the ref
const handleClickOutside = (event) => {
if (
searchSuggestionRef.current &&
!searchSuggestionRef.current.contains(event.target)
) {
setShowSuggestions(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [searchSuggestionRef]);