[Bug]: Dialog/Modal does not close by mouse click when wrapped in component with outer onClick event

[bennettdams]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.0.0

What browser are you using?

Chrome

Reproduction repository

https://codesandbox.io/s/proud-voice-dvdru?file=/src/App.tsx

Describe your issue

When the "Dialog" component is used in a component that is used in a component where an onClick handler is defined, the Dialog's is not closing when clicking on its button/on the overlay. Pressing the escape key works though.

Setup:

• ChildWithModal component, that brings its own "Dialog"
• Card component, clickable if needed

Here's an example with two childs. Only difference: in one example clicking the Card component should also open the Dialog.

App.tsx

    const { isOpen: isOpen1, open: open1, close: close1 } = useModal();
    const { isOpen: isOpen2, open: open2, close: close2 } = useModal();
    ...
    <div>
      <Card>
        <ChildWithModal
          isOpen={isOpen1}
          open={open1}
          close={close1}
        />
      </Card>

      <Card onClick={open2}>
        <ChildWithModal
          isOpen={isOpen2}
          open={open2}
          close={close2}
        />
      </Card>
    </div>

Card.tsx

// Generic card, clickable if needed
function Card({
  onClick,
  children
}: {
  onClick?: () => void;
  children: ReactNode;
}) {
  function handleClick(event: MouseEvent<HTMLDivElement>) {
    event.preventDefault();
    event.stopPropagation();
    console.log("Card | onClick", event);

    if (onClick) onClick();
  }

  return (
    <div
      className={`bg-blue-200 h-20 ${onClick && "cursor-pointer"}`}
      onClick={handleClick}
    >
      <div>{children}</div>
    </div>
  );
}

I'm not sure why preventing default/stopping propagation does not help here.

Demonstration

---

Full reference, but I would suggest looking at the CodeSandbox:

Click to expand

import "./styles.css";
import { useState, Fragment, ReactNode, MouseEvent, useEffect } from "react";
import { Dialog, Transition } from "@headlessui/react";

/**
 * First example from https://headlessui.dev/react/dialog,
 * just changed variable names and some styling.
 */
function Modal({
  isOpen,
  close,
  title
}: {
  isOpen: boolean;
  close: () => void;
  title: string;
}) {
  return (
    <Transition show={isOpen} as={Fragment}>
      <Dialog
        as="div"
        id="modal"
        className="fixed inset-0 z-10 overflow-y-auto"
        // initialFocus={cancelButtonRef}
        static
        open={isOpen}
        onClose={close}
      >
        <div className="min-h-screen px-4 text-center">
          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
            enterFrom="opacity-0"
            enterTo="opacity-100"
            leave="ease-in duration-200"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <Dialog.Overlay className="fixed inset-0 bg-gray-400 bg-opacity-50" />
          </Transition.Child>

          {/* This element is to trick the browser into centering the modal contents. */}
          <span
            className="inline-block h-screen align-middle"
            aria-hidden="true"
          >
            &#8203;
          </span>
          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
            enterFrom="opacity-0 scale-95"
            enterTo="opacity-100 scale-100"
            leave="ease-in duration-200"
            leaveFrom="opacity-100 scale-100"
            leaveTo="opacity-0 scale-95"
          >
            <div className="inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl">
              <Dialog.Title
                as="h3"
                className="text-lg font-medium leading-6 text-gray-900"
              >
                Payment successful
              </Dialog.Title>
              <div className="mt-2">
                <p className="text-sm text-gray-500">
                  Your payment has been successfully submitted. We’ve sent your
                  an email with all of the details of your order.
                </p>
              </div>

              <div className="mt-4">
                <button
                  type="button"
                  className="inline-flex justify-center px-4 py-2 text-sm font-medium text-blue-900 bg-blue-100 border border-transparent rounded-md hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500"
                  onClick={close}
                >
                  Got it, thanks!
                </button>
              </div>
            </div>
          </Transition.Child>
        </div>
      </Dialog>
    </Transition>
  );
}

// Child component that brings its own modal.
function ChildWithModal({
  isOpen,
  open,
  close,
  title
}: {
  isOpen: boolean;
  open: () => void;
  close: () => void;
  title: string;
}) {
  function handleClick(event: MouseEvent<HTMLDivElement>) {
    event.preventDefault();
    event.stopPropagation();
    console.log("Child | onClick", event);

    open();
  }

  return (
    <>
      <div className="h-full cursor-pointer" onClick={handleClick}>
        <h1>Child with modal</h1>
        <p>{title}</p>
      </div>
      <Modal title={title} isOpen={isOpen} close={close} />
    </>
  );
}

// Generic card, clickable if needed
function Card({
  onClick,
  children
}: {
  onClick?: () => void;
  children: ReactNode;
}) {
  function handleClick(event: MouseEvent<HTMLDivElement>) {
    event.preventDefault();
    event.stopPropagation();
    console.log("Card | onClick", event);

    if (onClick) onClick();
  }

  return (
    <div
      className={`bg-blue-200 h-20 ${onClick && "cursor-pointer"}`}
      onClick={handleClick}
    >
      <div>{children}</div>
    </div>
  );
}

function useModal() {
  const [isOpen, setIsOpen] = useState(false);

  function open() {
    setIsOpen(true);
  }

  function close() {
    setIsOpen(false);
  }

  return { isOpen, open, close };
}

export default function App() {
  const { isOpen: isOpen1, open: open1, close: close1 } = useModal();
  const { isOpen: isOpen2, open: open2, close: close2 } = useModal();

  return (
    <div className="App p-10 space-y-10 px-20">
      <Card>
        <ChildWithModal
          title="Example #1: everything works as expected"
          isOpen={isOpen1}
          open={open1}
          close={close1}
        />
      </Card>

      <Card onClick={open2}>
        <ChildWithModal
          title="Example #2: close button and outside click not working, press escape key"
          isOpen={isOpen2}
          open={open2}
          close={close2}
        />
      </Card>
    </div>
  );
}

[bishwenduk029]

@bennettdams , I think the button event is bubbling to the Card and since Card has a click handler so it is getting invoked. The following structure is responsible for the same I guess.

<Card {hasOnClick}>
 <ChildWithModal {noClickHandler, it's child has one but it is sibling of Modal so propagation is not stopped }>
   <Modal {noClickHandler}>
    <button {targetOfClick}>

Now the button click reaches Card and the onClick gets triggered. May be putting some sort of safeguards on useModal could help.

function useModal() {
  const [isOpen, setIsOpen] = useState(false);

  function open() {
    if (!isOpen) setIsOpen(true);
  }

  function close() {
    if (isOpen) setIsOpen(false);
  }

  return { isOpen, open, close };
}

[bennettdams]

May be putting some sort of safeguards

@bishwenduk029 Thanks! Yes, using safeguards does help and fixes the issue.

I'm not that deep into event propagation - shouldn't the bubbling be stoped by the handlers (.stopPropagation())?
Is this a bug in HeadlessUI or did I use it wrong?

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This should be fixed in #422, and will be available in the next release.
You can already try it using npm install @headlessui/react@dev or yarn add @headlessui/react@dev.

I also updated your reproduction CodeSandbox that includes the fix: https://codesandbox.io/s/heuristic-cdn-k9oiq

[bennettdams]

@RobinMalfait What a quick response... Thanks a lot!