Dialog onClose to contain original event

[KATT]

We have a fixed positioned "Burger"-icon that is positioned over the overlay and transforms into a "Close"-icon on mobile.

Hence we have two different things that can get an event and trigger a close event - both the sticky button and the button pressed.

This means, when we have the dialog open, close is triggered twice. I tried having e.stopPropagation() on my button, but the <Dialog/>'s onClose is triggered before.

If the onClose would contain the original event, I could trigger e.stopPropagation() there.

Here's the hack I have right now:

const useSidebarToggle = () => {
  const [isOpen, _setIsOpen] = useState(false);

  const isLocked = useRef(false);
  useEffect(() => {
    isLocked.current = true;
    const timer = setTimeout(() => {
      isLocked.current = false;
    }, 1);
    return () => {
      clearTimeout(timer);
    };
  }, [isOpen]);

  const setIsOpen = useCallback(
    (open: boolean) => {
      if (!isLocked.current) {
        _setIsOpen(open);
      }
    },
    [_setIsOpen],
  );
  return {
    isOpen,
    setIsOpen,
  };
};

Maybe there's a better workaround?

[KATT]

I found a better workaround

<button
  onMouseDown={(e) => {
    e.stopPropagation(); // <---------- magic
  }}
  onClick={(e) => {
    setIsOpen((open) => !open);
  }}
  >
    Toggle menu
</button>