From be67bec3201ac190e388a0ea18d38d4e0c9df543 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 12 Apr 2024 11:26:22 +0200 Subject: [PATCH 1/2] set default anchor strategy to `absolute` This is done for 2 reasons: 1. The default strategy in Floating UI was already `absolute` 2. It can improve performance drastically when using transitions The main reason we used `fixed` was to ensure that it wasn't accidentally positioned to another `relative` element. However, all components that use this `FloatingProvider` will also use a portal which puts elements in the `` already so this should be safe. If it is not safe for your application, then you can still use the `fixed` strategy. --- packages/@headlessui-react/src/internal/floating.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/@headlessui-react/src/internal/floating.tsx b/packages/@headlessui-react/src/internal/floating.tsx index 75dab82df..4f53dffe7 100644 --- a/packages/@headlessui-react/src/internal/floating.tsx +++ b/packages/@headlessui-react/src/internal/floating.tsx @@ -22,7 +22,7 @@ type Placement = 'top' | 'right' | 'bottom' | 'left' type BaseAnchorProps = { /** - * The strategy to use when positioning the panel. Defaults to `fixed`. + * The strategy to use when positioning the panel. Defaults to `absolute`. */ strategy: 'absolute' | 'fixed' @@ -171,7 +171,7 @@ export function FloatingProvider({ offset = 0, padding = 0, inner, - strategy = 'fixed', + strategy = 'absolute', } = useResolvedConfig(config, floatingEl) let [to, align = 'center'] = placement.split(' ') as [Placement | 'selection', Align | 'center'] From 918c30264017509090e697480e4529993c6d604d Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 12 Apr 2024 11:31:31 +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 369484268..575af7c17 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/packages/@headlessui-react/CHANGELOG.md @@ -32,6 +32,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Make the `Combobox` component `nullable` by default ([#3064](https://github.com/tailwindlabs/headlessui/pull/3064)) - Deprecate the `entered` prop on the `Transition` component ([#3089](https://github.com/tailwindlabs/headlessui/pull/3089)) - Use native `useId` and `useSyncExternalStore` hooks ([#3092](https://github.com/tailwindlabs/headlessui/pull/3092)) +- Use `absolute` as the default Floating UI strategy ([#3097](https://github.com/tailwindlabs/headlessui/pull/3097)) ### Added