Deepak•2y ago

Deepak – 06-27 Sep 2

hi, I am using the following code to focus my auto search suggestion box. it works as expected. If user click outside the search result container it will hide the container. However it only target the document and not the entire screen for ex if i click on browser tabs or address bar it won't work

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

I have tried

window.addEventListener("mousedown", handleClickOutside);

window.addEventListener("mousedown", handleClickOutside);

but it doesn't work

4 Replies

Unknown User•2y ago

Message Not Public

Deepak•2y ago

okay thanks

Unknown User•2y ago

Message Not Public

reactibot•2y ago

This thread hasn’t had any activity in 12 hours, so it’s now locked. Threads are closed automatically after 12 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/902647189120118794/1015145918732976144