4 replies

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

Reactiflux•4y ago•

4 replies

Deepak

Deepak – 06-27 Sep 2

 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

Continue the conversation

Join the Discord to ask follow-up questions and connect with the community

Reactiflux

The largest chat community for React professionals

178,664 Members

Join

Deepak – 06-27 Sep 2

Deepak – 06-27 Sep 2

Continue the conversation

Reactiflux

Continue the conversation

Reactiflux

Similar Threads