Dialog Overlay Stays Open After Closing Dialog with Close Button on Mobile

[lsbyerley]

Hi all.. I am using the Dialog component in my application and after first opening/closing the dialog on mobile, the user is unable to scroll or click on anything in the browser. This has been experienced on the iphone chrome browser and safari. On desktop, everything works fine. I'll post my modal component below and if anyone can point out any reason as to why this may be happening, I'd appreciate it. The modal classes are coming from https://daisyui.com/

import { Fragment, useRef } from 'react';
import { Dialog, Transition } from '@headlessui/react';
import { useAppContext } from '../../AppContext';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

const Modal = () => {
  let closeButtonRef = useRef(null);
  const { modalOpen, setModalOpen, modalContent, setModalContent } =
    useAppContext();

  const closeModal = () => {
    setModalOpen(false);
    // timeout to wait for modal transition to finish
    setTimeout(() => setModalContent(''), 500);
  };

  return (
    <Transition appear show={modalOpen} as={Fragment}>
      <Dialog
        as='div'
        className='fixed inset-0 z-10 overflow-y-auto'
        onClose={closeModal}
        initialFocus={closeButtonRef}
      >
        <div className='modal modal-open'>
          <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' />
          </Transition.Child>

          <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='modal-box'>
              <button
                className='absolute btn btn-sm btn-circle right-2 top-2'
                onClick={() => closeModal()}
                ref={closeButtonRef}
              >
                ✕
              </button>
              <div className='mt-8 prose'>
                <ReactMarkdown
                  children={modalContent}
                  remarkPlugins={[remarkGfm]}
                />
              </div>
            </div>
          </Transition.Child>
        </div>
      </Dialog>
    </Transition>
  );
};

export default Modal;

[lsbyerley]

So i've discovered this happens when the user uses the close button to close the modal. If they click outside the modal in the overlay area to close it, this does not happen. Still looking into why

[lsbyerley]

Turns out, i needed to add the open={modalOpen} prop to the <Dialog> component. Oddly, it still closes fine on desktop, but the overlay stays in the dom on mobile without this prop.