React Dropdown acessibility onClick

Question

at the current point, this code works, but when the user clicks to hide the menu, the useClickOutside fires too, the menu toggles off and on again... would there any way to fix that so when clicks outside it closes but when clicks the button it toggles on/off ?

const useClickOutside = (ref, handler) => {
    useEffect(() => {
        const clickHandler = (event) => {
            if (!ref.current || ref.current.contains(event.target)) {
                return;
            }
            handler(event);
        };

        document.addEventListener('mousedown', clickHandler);

        return () => {
            document.removeEventListener('mousedown', clickHandler);
        };
    });
};

const Settings = () => {
    const ref = useRef();
    const [toggle, setToggle] = useState(false);
    useClickOutside(ref, () => setToggle(false));

    return (
        <div className='settings'>
            <button onClick={() => setToggle(!toggle)} className='settings__button'>
                Menu
            </button>
            {toggle && (
                <div ref={ref} className='settings__panel'>
                    <Link className='settings__links' to='/user/settings'>
                        Your Profile
                    </Link>
                    <Link className='settings__links' to='/user/settings'>
                        Todos history
                    </Link>
                    <Link className='settings__links' to='/user/settings'>
                        Settings
                    </Link>
                    <Link className='settings__links' value={'Logout'} to='/user/login'>
                        Logout
                    </Link>
                </div>
            )}
        </div>
    );
};

Answer 1

You could make use of event stopPropagation. Add the call event.stopPropagation() to your onClick handler function that hides the menu.

<button 
  onClick={(e) => {
    e.stopPropagation();
    setToggle(!toggle);
  }}
  className='settings__button'
  >
   Menu
</button>

This will prevent that the onClick event bubbles upwards to the next event listener which would be your onClickOutside listener.

UPDATE:

This will only work if your event listener is listening for onClick events. Your inline onClick event listener will stop the propagation of the event of type click only.

document.addEventListener('click', clickHandler);

return () => {
  document.removeEventListener('click', clickHandler);
};

Answer 2

You might consider adding a onBlur event on the .settings div with a tabIndex=0.

You can then then capture blurs of the div and test if the event came from within the div or not.

const onBlur = (e: FocusEvent < HTMLElement > ) => {
  if (opened?) {
    const element = e.relatedTarget;

    if (element == null) {
      // dropdown was blured because window lost focused. probably close.
    } else if (element != e.currentTarget) {
      if (!e.currentTarget.contains(element as Node)) {
        // blured element is not in .settings. close
      }
    }
  }
};

If you want to get fancy you can also add a keydown and close on escape.

const onKeyDown = (e: KeyboardEvent) => {
  if (e.key === "Escape") {
    // close!
  }
);

Here is a code sandbox that implements these items.