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,