Breaking News: Grepper is joining You.com. Read the official announcement!

React Click Outside to Close Dropdown

Readul Ahmed answered on June 16, 2022 Popularity 9/10 Helpfulness 5/10

answer React Click Outside to Close Dropdown

related React closing a dropdown when click outside

React Click Outside to Close Dropdown

Comment

  
   const accMenuRef = useRef<any>()

  
  useEffect(() => {
    let handler = (e : any)=>{
      if(!accMenuRef.current.contains(e.target)){
        setDropDown(false);
      }      
    };

    document.addEventListener("mousedown", handler);
    

    return() =>{
      document.removeEventListener("mousedown", handler);
    }

  });

Popularity 9/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: click dropdown javascript

Link to this answer
Share Copy Link

Contributed on Jun 08 2023

Readul Ahmed

0 Answers Avg Quality 2/10

Closely Related Answers

React closing a dropdown when click outside

Comment

const Home = forwardRef(({ open, setOpen }, ref) => {
  console.log(open);

  return (
    <section ref={ref}>
      <h1>Feels good to be home!</h1>

      <button className="secondary" onClick={() => setOpen(!open)}>
        Dropdown Toggle
      </button>

      {open && (
        <ul>
          <li>One</li>
          <li>Two</li>
        </ul>
      )}
    </section>
  );
});

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: click clic

Link to this answer
Share Copy Link