title: MUI 5 + HeadlessUI: Can't close <DatePicker /> inside <Dialog />
body: <p>I'm using HeadlessUI in combination with MUI 5 and facing an issue where i can't close the <code>&lt;DatePicker /&gt;</code> date selection popper when using it inside a <code>&lt;Dialog /&gt;</code> component from HeadlessUI. The popper should close when i click anywhere outside the popper but inside the modal.</p>
  <p>I tried using MUI's <code>&lt;ClickAwayListener /&gt;</code> and also setting the popper to be rendered within the <code>&lt;Dialog /&gt;</code> by using <code>PopperProps={{ disablePortal: true }}</code> but both without success. Maybe i'm missing something obvious?</p>
  <pre class="lang-js prettyprint-override"><code>import { Dialog, Transition } from &quot;@headlessui/react&quot;;
  import { Fragment, useState } from &quot;react&quot;;
  import TextField from &quot;@mui/material/TextField&quot;;
  import AdapterDateFns from &quot;@mui/lab/AdapterDateFns&quot;;
  import LocalizationProvider from &quot;@mui/lab/LocalizationProvider&quot;;
  import DatePicker from &quot;@mui/lab/DatePicker&quot;;
  
  export default function MyModal() {
    let [isOpen, setIsOpen] = useState(true);
    const [value, setValue] = useState(null);
  
    function closeModal() {
      setIsOpen(false);
    }
  
    function openModal() {
      setIsOpen(true);
    }
  
    return (
      &lt;&gt;
        &lt;div className=&quot;fixed inset-0 flex items-center justify-center&quot;&gt;
          &lt;button
            type=&quot;button&quot;
            onClick={openModal}
            className=&quot;px-4 py-2 text-sm font-medium text-white bg-black rounded-md bg-opacity-20 hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75&quot;
          &gt;
            Open dialog
          &lt;/button&gt;
        &lt;/div&gt;
  
        &lt;Transition appear show={isOpen} as={Fragment}&gt;
          &lt;Dialog
            as=&quot;div&quot;
            className=&quot;fixed inset-0 z-10 overflow-y-auto&quot;
            onClose={() =&gt; {}}
          &gt;
            &lt;div className=&quot;min-h-screen px-4 text-center&quot;&gt;
              &lt;Transition.Child
                as={Fragment}
                enter=&quot;ease-out duration-300&quot;
                enterFrom=&quot;opacity-0&quot;
                enterTo=&quot;opacity-100&quot;
                leave=&quot;ease-in duration-200&quot;
                leaveFrom=&quot;opacity-100&quot;
                leaveTo=&quot;opacity-0&quot;
              &gt;
                &lt;Dialog.Overlay className=&quot;fixed inset-0&quot; /&gt;
              &lt;/Transition.Child&gt;
  
              {/* This element is to trick the browser into centering the modal contents. */}
              &lt;span
                className=&quot;inline-block h-screen align-middle&quot;
                aria-hidden=&quot;true&quot;
              &gt;
                &amp;#8203;
              &lt;/span&gt;
              &lt;Transition.Child
                as={Fragment}
                enter=&quot;ease-out duration-300&quot;
                enterFrom=&quot;opacity-0 scale-95&quot;
                enterTo=&quot;opacity-100 scale-100&quot;
                leave=&quot;ease-in duration-200&quot;
                leaveFrom=&quot;opacity-100 scale-100&quot;
                leaveTo=&quot;opacity-0 scale-95&quot;
              &gt;
                &lt;div className=&quot;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&quot;&gt;
                  &lt;Dialog.Title
                    as=&quot;h3&quot;
                    className=&quot;text-lg font-medium leading-6 text-gray-900&quot;
                  &gt;
                    Payment successful
                  &lt;/Dialog.Title&gt;
                  &lt;div className=&quot;mt-2&quot;&gt;
                    &lt;LocalizationProvider dateAdapter={AdapterDateFns}&gt;
                      &lt;DatePicker
                        label=&quot;Basic example&quot;
                        value={value}
                        onChange={(newValue) =&gt; {
                          setValue(newValue);
                        }}
                        renderInput={(params) =&gt; &lt;TextField {...params} /&gt;}
                      /&gt;
                    &lt;/LocalizationProvider&gt;
                  &lt;/div&gt;
  
                  &lt;div className=&quot;mt-4&quot;&gt;
                    &lt;button
                      type=&quot;button&quot;
                      className=&quot;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&quot;
                      onClick={closeModal}
                    &gt;
                      Got it, thanks!
                    &lt;/button&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/Transition.Child&gt;
            &lt;/div&gt;
          &lt;/Dialog&gt;
        &lt;/Transition&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  <p><a href="https://codesandbox.io/s/eloquent-clarke-fl8uc?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit eloquent-clarke-fl8uc" /></a></p>