by prop for Listbox, Combobox and RadioGroup (#1482, #1717, #1814, #1815)@headlessui/tailwindcss plugin (#1487)Menu component when using tab key (#1673)Tabs don't change automagically (#1680)Popover close to be passed directly to onClick handlers (#1696)Dialog (#1716)Combobox re-opening keyboard issue on mobile (#1732)Disclosure.Panel is properly linked (#1747)<tab> in the Combobox component (#1750)Combobox component (#1761)Menu.Button if necessary when activating a Menu.Option (#1782)Transition component's incorrect cleanup and order of events (#1803)unmount={false} (#1811)Listbox.Option and Combobox.Option components (#1812)ref stealing from children (#1820)value from the Combobox and Listbox components render prop (#1822)scroll lock on iOS (#1824)Tab component when using as={Fragment} (#1826)Transition component (#1823)CMD+Backspace works in nullable mode for Combobox component (#1617)Dialog component (#1546)<iframe> elements (#1552)Tab component when using arrow keys (#1584)<slot> children when using as="template" (#1548)Dialog component (#1546)<iframe> elements (#1552)Dialog on the client (#1566)Tab component when using arrow keys (#1584)aria-expanded for ComboboxInput component (#1605)@headlessui/tailwindcss plugin (#1487)Popover.Panel in React 18 (#1409)Escape when event got prevented in Dialog component (#1424)FocusTrap behaviour (#1432)Popover Tab logic by using sentinel nodes instead of keydown event interception (#1440)Popover.Panel is clickable without closing the Popover (#1443)Dialog component (#1457)ref optional in the Popover component (#1465)ref is forwarded on the Transition.Child component (#1473)DialogPanel exposes its ref (#1404)Escape when event got prevented in Dialog component (#1424)FocusTrap behaviour (#1432)Popover Tab logic by using sentinel nodes instead of keydown event interception (#1440)PopoverPanel is clickable without closing the Popover (#1443)Dialog component (#1457)Tab component (#1393)ref prop to all components (#1116)Popover.Panel components (#1153)Tab component (#1155)hover scroll issue in Listbox, Combobox and Menu components (#1161)Listbox, Combobox and Menu actions (#1168)<Transition> flickering issue (#1118)appear prop on the <Transition> component works regardless of multiple rerenders (#1179)Combobox.Input when the value gets reset (#1181)beforeEnter callback on the <Transition> component caused by SSR (#1183)item/option index on Listbox, Combobox and Menu components (#1184)Tab on mouseup (#1192)focus() from Listbox.Option (#1218)ownerDocument instead of document (#1158)Tab and Dialog components (#1231)Combobox.Input value (#1248)Popover.Button (#1263)active option in the Listbox and Combobox components (#1264)Dialog component (#1268)Tab component (#1272)Combobox (#1279, #1281)RadioGroup, Switch and Combobox components (#1285)Dialog (#1360)Listbox and Combobox components (#1243, #1355)Combobox (#1295)Dialog.Panel to resolve issues when scrolling long dialogs that use Dialog.Overlay (#1333)Dialog.Overlay to Dialog.PanelIn previous versions of Headless UI, closing a dialog was handled by a click handler that lived on the Dialog.Overlay component, so as long as your overlay was rendered behind your panel, clicking outside the panel would close the dialog.
This created an issue with scrollable dialogs, because it became easy to accidentally position your overlay on top of the scrollbar, which made it impossible to click the scrollbar without closing the dialog. You also couldn't scroll the dialog when your mouse was hovering over the overlay — only when your mouse was hovering over the actual panel.
We've fixed this in Headless UI v1.6 by adding a dedicated Dialog.Panel component, and changing how "click outside" is handled. Now, if you're using a Dialog.Panel, the dialog is closed any time you click any element outside of it, rather than closing only when a Dialog.Overlay is explicitly clicked.
If you're using Dialog.Overlay and not using Dialog.Panel, everything will continue to work exactly as it did before (including the bug I described above) to preserve backwards compatibility, but we highly encourage you to migrate to using Dialog.Panel, and to stop using Dialog.Overlay, instead using a simple div element:
<Dialog
open={isOpen}
onClose={closeModal}
className="fixed inset-0 flex items-center justify-center ..."
>
- <Dialog.Overlay className="fixed inset-0 bg-black/25" />
+ <div className="fixed inset-0 bg-black/25" />
- <div className="bg-white shadow-xl rounded-2xl ...">
+ <Dialog.Panel className="bg-white shadow-xl rounded-2xl ...">
<Dialog.Title>Payment successful</Dialog.Title>
{/* ... */}
- </div>
+ </Dialog.Panel>
</Dialog>
Read through the updated Dialog documentation for more examples of using Dialog.Panel.
Listbox and ComboboxIf you have been using the insiders build for the new multiple value support for the Listbox and/or Combobox component, then you will have to add a new multiple prop to those components to tell the component that you are using multiple values. Previously this was automatically detected based on whether you were passing an array to the value prop or not.
- <Listbox value={selectedPeople} onChange={setSelectedPeople} />
+ <Listbox value={selectedPeople} onChange={setSelectedPeople} multiple />
Combobox initially (#1148)Dialog usage in Tab component (#1149)PopoverPanel components (#1153)hover scroll issue in Listbox, Combobox and Menu components (#1161)Listbox, Combobox and Menu actions (#1168)ComboboxInput when the value gets reset (#1181)item/option index on Listbox, Combobox and Menu components (#1184)Dialog cycling (#553)Tab on mouseup (#1192)focus() from Listbox.Option (#1218)ownerDocument instead of document (#1158)el from each component (#1230)Tab and Dialog components (#1231)ComboboxInput value (#1248)PopoverButton (#1263)Dialog component (#1268)Tab (#1272)initialFocusRef correctly (#1276)Combobox (#1279, #1281)RadioGroup, Switch and Combobox components (#1285)nullable prop for Vue (2b109548b1a94a30858cf58c8f525554a1c12cbb)open prop over OpenClosed state (#1360)Listbox and Combobox components (#1243, #1355)Combobox (#1295)DialogPanel to resolve issues when scrolling long dialogs that use DialogOverlay (#1333)DialogOverlay to DialogPanelIn previous versions of Headless UI, closing a dialog was handled by a click handler that lived on the DialogOverlay component, so as long as your overlay was rendered behind your panel, clicking outside the panel would close the dialog.
This created an issue with scrollable dialogs, because it became easy to accidentally position your overlay on top of the scrollbar, which made it impossible to click the scrollbar without closing the dialog. You also couldn't scroll the dialog when your mouse was hovering over the overlay — only when your mouse was hovering over the actual panel.
We've fixed this in Headless UI v1.6 by adding a dedicated DialogPanel component, and changing how "click outside" is handled. Now, if you're using a DialogPanel, the dialog is closed any time you click any element outside of it, rather than closing only when a DialogOverlay is explicitly clicked.
If you're using DialogOverlay and not using DialogPanel, everything will continue to work exactly as it did before (including the bug I described above) to preserve backwards compatibility, but we highly encourage you to migrate to using DialogPanel, and to stop using DialogOverlay, instead using a simple div element:
<Dialog
:open="isOpen"
@close="closeModal"
class="fixed inset-0 flex items-center justify-center ..."
>
- <DialogOverlay class="fixed inset-0 bg-black/25" />
+ <div class="fixed inset-0 bg-black/25" />
- <div class="bg-white shadow-xl rounded-2xl ...">
+ <DialogPanel class="bg-white shadow-xl rounded-2xl ...">
<DialogTitle>Payment successful</DialogTitle>
<!-- ... -->
- </div>
+ </DialogPanel>
</Dialog>
Read through the updated Dialog documentation for more examples of using DialogPanel.
Listbox and ComboboxIf you have been using the insiders build for the new multiple value support for the Listbox and/or Combobox component, then you will have to add a new multiple prop to those components to tell the component that you are using multiple values. Previously this was automatically detected based on whether you were passing an array to the value prop or not.
- <Listbox v-model="selectedPeople" />
+ <Listbox v-model="selectedPeople" multiple />
MenuItem, ListboxOption and RadioGroupOption (#1045)esbuild and TypeScript 4! (#1055)Menu.Item, Listbox.Option and RadioGroup.Option (#1045)esbuild and TypeScript 4! (#1055)