From 42964ad6978fd3b374f87ec5612db933ba2d2450 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 25 Apr 2024 17:07:03 +0200 Subject: [PATCH 1/2] add overflow auto when using `anchor` We want to constrain the anchored element within the viewport (minus the padding if there is some). But without an `overflow: auto`, it would overflow and the `maxWidth` / `maxHeight` are a bit pointless. Once you opt-in to `anchor`, then we have to provide styles anywhere. This improves the UX. --- packages/@headlessui-react/src/internal/floating.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/@headlessui-react/src/internal/floating.tsx b/packages/@headlessui-react/src/internal/floating.tsx index 802d3019f8..398b126a5d 100644 --- a/packages/@headlessui-react/src/internal/floating.tsx +++ b/packages/@headlessui-react/src/internal/floating.tsx @@ -314,6 +314,7 @@ export function FloatingProvider({ sizeMiddleware({ apply({ availableWidth, availableHeight, elements }) { Object.assign(elements.floating.style, { + overflow: 'auto', maxWidth: `${availableWidth - padding}px`, maxHeight: `${availableHeight - padding}px`, }) From 280390107cb86fd2a17e5c5376d571fdc5005ed3 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 25 Apr 2024 17:10:59 +0200 Subject: [PATCH 2/2] update changelog --- packages/@headlessui-react/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index 1f325f65e6..e2ce5f7f3a 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/packages/@headlessui-react/CHANGELOG.md @@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Ensure anchored components are always rendered in a stacking context ([#3115](https://github.com/tailwindlabs/headlessui/pull/3115)) - Add optional `onClose` callback to `Combobox` component ([#3122](https://github.com/tailwindlabs/headlessui/pull/3122)) - Make sure `data-disabled` is available on virtualized options in the `Combobox` component ([#3128](https://github.com/tailwindlabs/headlessui/pull/3128)) +- Add `overflow: auto` when using the `anchor` prop ([#3138](https://github.com/tailwindlabs/headlessui/pull/3138)) ### Changed