Click events not closing Date / Time picker selection modal inside of HeadlessUI modal

[erikbergkvist]

I have a HeadlessUI Dialog with a import { Datepicker } from '@mobiscroll/react' within it:

  const [isOpen, setIsOpen] = useState(true)

<Dialog open={isOpen} onClose={() => setIsOpen(false)}>
          <Dialog.Panel>
            <div className={`${styles.calendar} ${styles.datepicker}`}>
              <Datepicker
                controls={['calendar']}
                theme="light"
                value={new Date()}
                dateFormat="MM/DD/YY"
                dataTimezone="utc"
                select={'date'}
                displayTimezone="local"
              />
            </div>
          </Dialog.Panel>
        </Dialog>

When the Datepicker is open, clicking anywhere within the headlessUI modal will not close it. If you however, click outside of the headlessUI modal, the Datepicker will close. Not sure if this bug is on Headless's side, Mobiscroll's side, or in our own code. We don't have any special handlers that should be intercepting the clicks.

Maybe worth mentioning the same functionality occurs with the Timepicker.

Also pressing Enter as well as Escape will successfully close the date selector.