From 888ea123a415710a752e88f1797325e01dbd9db7 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 15 Apr 2024 17:43:34 +0200 Subject: [PATCH] Use `absolute` as the default Floating UI strategy (#3097) * 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. * update changelog --- packages/@headlessui-react/CHANGELOG.md | 1 + packages/@headlessui-react/src/internal/floating.tsx | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index bb9e43a900..d74d9a8547 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/packages/@headlessui-react/CHANGELOG.md @@ -27,6 +27,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 diff --git a/packages/@headlessui-react/src/internal/floating.tsx b/packages/@headlessui-react/src/internal/floating.tsx index 75dab82dfe..4f53dffe78 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']