From 82f20754ce85d7166fe76afb2d2f7c239bfd7d7f Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Sat, 27 Apr 2024 00:06:16 +0200 Subject: [PATCH 1/2] use `var(--anchor-max-height)` if available MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When using the `anchor` prop, we try to position the anchored element within the viewport. We use the size middleware of Floating UI to ensure we are working in a constrained `max-width` and `max-height`. However, if you want to limit the height of let's say a `ComboboxOptions` then you instinctively add `max-h-60` for example. The problem is that the `max-height` set by Floating UI will win because it's inline styles. You could use `!max-h-60` which makes it `!important`, but then you can run into an issue where the max height set by the user is larger than the available space which results in combobox options that are unavailable. To solve this, we want best of both worlds by ensuring we prefer the size from the user, but constrain it with the value we know. We now read from a `var(--anchor-max-height)` variable where you can set your own preferred max height. E.g.: ```ts … ``` --- packages/@headlessui-react/src/internal/floating.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@headlessui-react/src/internal/floating.tsx b/packages/@headlessui-react/src/internal/floating.tsx index 398b126a5d..9dfa654f8c 100644 --- a/packages/@headlessui-react/src/internal/floating.tsx +++ b/packages/@headlessui-react/src/internal/floating.tsx @@ -316,7 +316,7 @@ export function FloatingProvider({ Object.assign(elements.floating.style, { overflow: 'auto', maxWidth: `${availableWidth - padding}px`, - maxHeight: `${availableHeight - padding}px`, + maxHeight: `min(var(--anchor-max-height, 100vh), ${availableHeight - padding}px)`, }) }, }), From 41cb9c1b73754e712623b7c680f6d4af1f3a65f5 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Sat, 27 Apr 2024 00:15:11 +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 81fe59f334..d406cc4714 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/packages/@headlessui-react/CHANGELOG.md @@ -50,6 +50,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add `portal` prop to `Combobox`, `Listbox`, `Menu` and `Popover` components ([#3124](https://github.com/tailwindlabs/headlessui/pull/3124)) - Add frozen value to `ComboboxOptions` component ([#3126](https://github.com/tailwindlabs/headlessui/pull/3126)) - Add string shorthand for the `anchor` prop ([#3133](https://github.com/tailwindlabs/headlessui/pull/3133)) +- Use `var(--anchor-max-height)` when using the `anchor` prop ([#3148](https://github.com/tailwindlabs/headlessui/pull/3148)) ## [1.7.19] - 2024-04-15