Dialog.Panel outside click onClose execute twice .

[tianyingchun]

What package within Headless UI are you using?
"@headlessui/react": "^1.6.3",

What version of that package are you using?
"@headlessui/react": "^1.6.3",

What browser are you using?
Chrome

Reproduction URL

export const SidebarFilter: FC<SidebarFilterProps> = ({ show, onFilterOptionChanged, onFiltersClose }) => {
  const handleClose = useCallback((e) => {
    e.preventDefault;
    console.log('close...');
    // onFiltersClose();
  }, []);

  return (
  <Transition show={show} as={Fragment}>
           {/* While Dialog wrappered within <Transition /> we shoud not specificed open property here (cause of transition animation.), click outsite of Dialog.panel, it will trigger `onClose` twice  */}
      <Dialog  as="div" className="fixed inset-0 z-40 flex sm:hidden" onClose={handleClose}>
        <Dialog.Panel className="">
          {/* Filters */}
          <div className="h-80 w-80 bg-white">ssfwer</div>
        </Dialog.Panel>
      </Dialog>
    </Transition>
  );
};

Describe your issue
while click outside of dialog.panel always trigger onClose twice.

[tianyingchun]

BTW, if we continue use Dialog.Overlay and without Dialoag.Panel it works fine.

[RobinMalfait]

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

I'm going to close this as a duplicate of #1490