Ensure anchored components are always rendered in a stacking context (#…

…3115)

* 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

@@ -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
 

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,