From 38551c851211458a9080ea8914b53b8505993a0d Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Sat, 20 Apr 2024 01:01:23 +0200
Subject: [PATCH] Ensure anchored components are always rendered in a stacking
 context (#3115)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* provide `floatingStyles` based on incoming `anchor` information

Before this change, we were only providing the `floatingStyles` based on
the `isEnabled` state. However, this relies on information that is only
available in the next render.

Now the styles are provided one render too late. This means, that there
will be a moment where the `ListboxOptions` (in case of a `Listbox`) is
rendered at the end of the page (and expanding the height of the parent)
without positioning it on top of it in a separate layer (due to the
`position: absolute;`)

The reason this was added was to prevent applying styles to the
`ListboxOptions` if it did not require anchoring (aka no `anchor={{…}}`
prop is provided).

Instead of relying on the `isEnabled` value (which is computed based on
information that is only available in the next render), we provide the
styles based on the incoming `anchor` information which is available
immediately.

The cool thing is that Floating UI is already providing a default
`position: absolute; top: 0; left: 0;` style. If we apply this, it's
already stacked instead of rendering at the end of the page.

* update changelog
---
 packages/@headlessui-react/CHANGELOG.md              | 1 +
 packages/@headlessui-react/src/internal/floating.tsx | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index 85e6c58..f0a466d 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -23,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Omit `nullable` prop from `Combobox` component ([#3100](https://github.com/tailwindlabs/headlessui/pull/3100))
 - Ensure anchored components are properly stacked on top of `Dialog` components ([#3111](https://github.com/tailwindlabs/headlessui/pull/3111))
 - Move focus to `ListboxOptions` and `MenuItems` when they are rendered later ([#3112](https://github.com/tailwindlabs/headlessui/pull/3112))
+- Ensure anchored components are always rendered in a stacking context ([#3115](https://github.com/tailwindlabs/headlessui/pull/3115))
 
 ### Changed
 
diff --git a/packages/@headlessui-react/src/internal/floating.tsx b/packages/@headlessui-react/src/internal/floating.tsx
index 4f53dff..2a67a2d 100644
--- a/packages/@headlessui-react/src/internal/floating.tsx
+++ b/packages/@headlessui-react/src/internal/floating.tsx
@@ -139,8 +139,8 @@ export function useFloatingPanel(
   let context = useContext(FloatingContext)
 
   return useMemo(
-    () => [context.setFloating, context.styles] as const,
-    [context.setFloating, context.styles]
+    () => [context.setFloating, placement ? context.styles : {}] as const,
+    [context.setFloating, placement, context.styles]
   )
 }
 
@@ -343,7 +343,7 @@ export function FloatingProvider({
         value={{
           setFloating: setFloatingRef,
           setReference: refs.setReference,
-          styles: !isEnabled ? {} : floatingStyles,
+          styles: floatingStyles,
           getReferenceProps,
           getFloatingProps,
           slot: data,