tailwindlabs/headlessui @headlessui/vue@v1.6.0

on GitHub

Fixed

• Make sure that the input syncs when the combobox closes (#1137)
• Ensure that you can close the Combobox initially (#1148)
• Fix Dialog usage in Tab component (#1149)
• Ensure links are triggered inside PopoverPanel components (#1153)
• Fix hover scroll issue in Listbox, Combobox and Menu components (#1161)
• Guarantee DOM sort order when performing Listbox, Combobox and Menu actions (#1168)
• Improve outside click support (#1175)
• Reset ComboboxInput when the value gets reset (#1181)
• Adjust active item/option index on Listbox, Combobox and Menu components (#1184)
• Fix re-focusing element after close (#1186)
• Fix Dialog cycling (#553)
• 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)
• Don't drop initial character when searching in Combobox (#1223)
• Use ownerDocument instead of document (#1158)
• Fix, re-expose el from each component (#1230)
• Ensure focus trapping plays well with the Tab and Dialog components (#1231)
• Improve syncing of ComboboxInput value (#1248)
• Fix tree-shaking support (#1247)
• Stop propagation on the PopoverButton (#1263)
• Fix incorrect closing while interacting with third party libraries in Dialog component (#1268)
• Mimic browser select on focus when navigating via Tab (#1272)
• Resolve initialFocusRef correctly (#1276)
• Ensure that there is always an active option in the Combobox (#1279, #1281)
• Support classic form submissions in RadioGroup, Switch and Combobox components (#1285)
• Fix nullable prop for Vue (2b109548b1a94a30858cf58c8f525554a1c12cbb)
• Prefer incoming open prop over OpenClosed state (#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 DialogPanel to resolve issues when scrolling long dialogs that use DialogOverlay (#1333)

Changes that might affect you

Migrating from DialogOverlay to DialogPanel

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

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 v-model="selectedPeople" />
+  <Listbox v-model="selectedPeople" multiple />