tailwindlabs/headlessui @headlessui/react@v1.6.0

on GitHub

Fixed

• Ensure that you can add the ref prop to all components (#1116)
• Ensure links are triggered inside Popover.Panel components (#1153)
• Improve SSR for Tab component (#1155)
• Fix hover scroll issue in Listbox, Combobox and Menu components (#1161)
• Guarantee DOM sort order when performing Listbox, Combobox and Menu actions (#1168)
• Fix <Transition> flickering issue (#1118)
• Improve outside click support (#1175)
• Ensure that appear prop on the <Transition> component works regardless of multiple rerenders (#1179)
• Reset Combobox.Input when the value gets reset (#1181)
• Fix double beforeEnter callback on the <Transition> component caused by SSR (#1183)
• Adjust active item/option index on Listbox, Combobox and Menu components (#1184)
• Only activate the Tab on mouseup (#1192)
• Ignore "outside click" on removed elements (#1193)
• Remove focus() from Listbox.Option (#1218)
• Improve some internal code (#1221)
• Use ownerDocument instead of document (#1158)
• Ensure focus trapping plays well with the Tab and Dialog components (#1231)
• Improve syncing of Combobox.Input value (#1248)
• Fix tree-shaking support (#1247)
• Stop propagation on the Popover.Button (#1263)
• Fix incorrect active option in the Listbox and Combobox components (#1264)
• Properly merge incoming props (#1265)
• Fix incorrect closing while interacting with third party libraries in Dialog component (#1268)
• Mimic browser select on focus when navigating the Tab component (#1272)
• Ensure that there is always an active option in the Combobox (#1279, #1281)
• Support classic form submissions in RadioGroup, Switch and Combobox components (#1285)
• Add React 18 compatibility (#1326)
• Fix open/closed state issue in Dialog (#1360)

Added

• Add classic form submission compatibility via new hidden inputs (#1214)
• Add multiple value support to Listbox and Combobox components (#1243, #1355)
• Add support for clearing the value of a Combobox (#1295)
• Add Dialog.Panel to resolve issues when scrolling long dialogs that use Dialog.Overlay (#1333)

Changes that might affect you

Migrating from Dialog.Overlay to Dialog.Panel

In 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.

Multiple value support for Listbox and Combobox

If 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 />