headlessui icon indicating copy to clipboard operation
headlessui copied to clipboard

Dialog closes when clicking outside options list of Radix UI Select

Open WhiteJoshuaD opened this issue 1 year ago • 0 comments

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v2.2.0

What browser are you using?

Chrome

Reproduction URL

https://stackblitz.com/edit/sb1-n7fwwv?file=src%2Fcomponents%2FDialogForm.tsx

Describe your issue

When using a <Select> from Radix Primitives inside a Headless UI <Dialog>, clicking outside the list of options (but still within the modal content) closes the modal.

To reproduce:

  1. Click the "Open Form" button.
  2. Click "Select a Role" to open the options dropdown.
  3. Do not select an option. Instead, click anywhere inside the modal except inside the options dropdown (e.g., on the description text).
  4. The Dialog will close despite the click event being triggered from within the dialog.

This is similar to a previous issue, #2533, which has been marked as resolved.

WhiteJoshuaD avatar Nov 22 '24 19:11 WhiteJoshuaD