dropdown not closing on clicking on same icon reactjs

[RahulMittal18]

Expected Behavior : When clicked on profile icon, if dropdown is not open,open the dropdown else close the dropdown. And close the dropdown if clicked anywhere outside the dropdown.

Actual Behavior: When clicked on profile icon, if dropdown is not open, the dropdown gets open. And the dropdown is also closing if clicked anywhere outside the dropdown. but if dropdown is already open, it does not close on clicking on profile icon again.

Here is my code:

const Navbar = () => {
  const [isOpen, setIsOpen] = useState(false);
  const imgRef = useRef();
  useEffect(() => {
    let closeDropdown = (e) => {
      if (imgRef.current && !imgRef.current.contains(e.target)) {
        setIsOpen(false);
      }
    };
    document.body.addEventListener("click", closeDropdown);
    return () => document.body.removeEventListener("click", closeDropdown);
    }, []);


    return (
       <div>
              <div className={"dropdownn1 " + (isOpen ? "open" : "closed")}>
                    <Dropdown />
              </div>
              <div className="profile_icon_div" ref={imgRef}>
                     <img
                        src={profileImageUrl}
                        onClick={() => setIsOpen((prev) => !prev)}
                        className="profile_icon_image"
                        alt=""
                      />
               </div>
        </div>
      );
};

export default Navbar;

[Animesh239]

you can use the elseif for targeting the same icon when dropdown is active

useEffect(() => {
  let closeDropdown = (e) => {
    if (imgRef.current && !imgRef.current.contains(e.target)) {
      setIsOpen(false);
    } else if (imgRef.current === e.target) {
      setIsOpen((prev) => !prev);
    }
  };
  document.body.addEventListener("click", closeDropdown);
  return () => document.body.removeEventListener("click", closeDropdown);
}, []);

[RahulMittal18]

Still not working @Animesh239

[realmofYogesh]

useEffect(() => {

let closeDropdown = (e) => {
  if (imgRef.current && !imgRef.current.contains(e.target)) {
    setIsOpen(false);
  }
};
document.body.addEventListener("click", closeDropdown);
return () => document.body.removeEventListener("click", closeDropdown);
}, [isOpen]);

// there I added [isOpen] in the dependency array of useEffect
// whenever isOpen will change useEffect will be called with its sideeffect
// I think it will work.

.
.
.
.

// And yeah one more thing is that , there is an extra div tag

return (
   <div>
     <div>
          <div className={"dropdownn1 " + (isOpen ? "open" : "closed")}>
          <Dropdown />
      </div>
      <div className="profile_icon_div" ref={imgRef}>
             <img
                src={profileImageUrl}
                onClick={() => setIsOpen((prev) => !prev)}
                className="profile_icon_image"
                alt=""
              />
       </div>
     </div>
  );

[RahulMittal18]

Still not working guys @Animesh239 @iRONiCBAT7 . Ignore extra div, there is no extra div in the real code. It just got extra here in copying.

my updated useEffect which is not working stll:

 useEffect(() => {
    let closeDropdown = (e) => {
      if (imgRef.current && !imgRef.current.contains(e.target)) {
        setIsOpen(false);
      } else if (imgRef.current === e.target) {
        setIsOpen((prev) => !prev);
      }
    };
    document.body.addEventListener("click", closeDropdown);
    return () => document.body.removeEventListener("click", closeDropdown);
  }, [isOpen]);

[ag533]

You are using imgRef but I can't see it defined anywhere. I can only see the state defined not the imgRef. If this is just the copy paste mistake from the original code then it's fine ignore this comment and if not please add const ref = useRef(); below the state.

Also you can change the if condition to something like !imgRef?.current?.contains(e.target) this is more concise and easy to read and make the code look better.

Please first check that the state is changing when you click on the image from isOpen === true to isOpen === false because it is possible it is not change. To make the state change easy just use the following onClick={() => { setIsOpen(!isOpen); }} this will help to change to opposite state when the image is clicked easily. According to what i can see the problem is maybe with the css class name className={"dropdownn1 " + (isOpen ? "open" : "closed") and it may not be assigning names properly. As an alternate to this you can simply remove the line and pass the isOpen state as a prop to the <Dropdown /> menu and use something like this inside the component const Dropdown = ({ open }) => { return ( <div > {open && <div className="dropdown_container"></div>} </div>);}

[RahulMittal18]

None of them worked @ag533
IsOpen remains true even when I click on profile icon again and again.

[ag533]

Create a handleClick function to set state. Something like

Def handleClick = () => {
setIsOpen(!open)
}

An call this function in onClick rather than setting the state directly in onClick. As setting the state directly can lead error in the code - see this article - https://refine.dev/blog/common-usestate-mistakes-and-how-to-avoid/

[umeh-promise]

Firstly boss, you did not reference the imgRef.
It should be const imageRef = React.useRef()

import React, {useState, useRef} from 'react'
const Navbar = () => {
const [isOpen, setIsOpen] = useState(false);
const imgRef = useRef()

useEffect(() => {
const closeDropdown = (e) => {
if (imgRef.current && !imgRef.current?.contains(e.target)) {
setIsOpen(false);
}
};
document.body.addEventListener("click", closeDropdown);
return () => document.body.removeEventListener("click", closeDropdown);
}, []);

return (
   <div>
     <div>
          <div className={"dropdownn1 " + (isOpen ? "open" : "closed")}>
          <Dropdown />
      </div>
      <div className="profile_icon_div" ref={imgRef}>
             <img
                src={profileImageUrl}
                onClick={() => setIsOpen((prev) => !prev)}
                className="profile_icon_image"
                alt=""
              />
       </div>
     </div>
  );

};

export default Navbar;

Also do confirm from you dev tools to see if the state of isOpen changes on click (i.e from false to true)

[RahulMittal18]

Updated the original code @umeh-promise ..check now..still not working

[RahulMittal18]

tried this too @ag533 .. still not working

[ag533]

Hey @RahulMittal18,

Try this solution it's working fine for me - https://codesandbox.io/s/quiet-sky-s85kqe?file=/src/App.js. It is similar to you solution but without the overhead complications of the CSS 😄. Let me know if this helps.

All the best 😸

[rachit298]

@RahulMittal18 Please share all dependencies of this file, like the CSS code you used in this file and the Dropdown component's code.

[RahulMittal18]

@ag533 read the complete expected behaviour once again.
Dropdown is not closing on clicking outside the navbar

[RahulMittal18]

@rachit298 It is not possible to share here. At max, I can schedule a meet for this.