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 `<body>` already so this should be safe. If it is not safe for your application, then you can still use the `fixed` strategy. * update changelog
tailwindlabs · Apr 15, 2024 · 888ea12 · 888ea12
1 parent 512bf44
commit 888ea12
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git 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
@@ -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']