Ensure the static and portal props work nicely together (#3152)

* ensure we keep the `static` prop into account when using the `<Portal/>` around anchored elements. * update changelog
tailwindlabs · Apr 29, 2024 · 4acf9e2 · 4acf9e2
1 parent 872808c
commit 4acf9e2
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 4 deletions.
diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
@@ -28,6 +28,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Make sure `data-disabled` is available on virtualized options in the `Combobox` component ([#3128](https://github.com/tailwindlabs/headlessui/pull/3128))
 - Add `overflow: auto` when using the `anchor` prop ([#3138](https://github.com/tailwindlabs/headlessui/pull/3138))
 - Ensure `TransitionRoot` component without props transitions correctly ([#3147](https://github.com/tailwindlabs/headlessui/pull/3147))
+- Ensure the `static` and `portal` props work nicely together ([#3152](https://github.com/tailwindlabs/headlessui/pull/3152))
 
 ### Changed
 

diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx
@@ -1680,7 +1680,7 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
   })
 
   return (
-    <Portal enabled={visible && portal}>
+    <Portal enabled={portal ? props.static || visible : false}>
       <ComboboxDataContext.Provider
         value={data.mode === ValueMode.Multi ? data : { ...data, isSelected }}
       >

diff --git a/packages/@headlessui-react/src/components/listbox/listbox.tsx b/packages/@headlessui-react/src/components/listbox/listbox.tsx
@@ -1110,7 +1110,7 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
   })
 
   return (
-    <Portal enabled={visible && portal}>
+    <Portal enabled={portal ? props.static || visible : false}>
       <ListboxDataContext.Provider
         value={data.mode === ValueMode.Multi ? data : { ...data, isSelected }}
       >

diff --git a/packages/@headlessui-react/src/components/menu/menu.tsx b/packages/@headlessui-react/src/components/menu/menu.tsx
@@ -783,7 +783,7 @@ function ItemsFn<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG>(
   })
 
   return (
-    <Portal enabled={visible && portal}>
+    <Portal enabled={portal ? props.static || visible : false}>
       {render({
         ourProps,
         theirProps,

diff --git a/packages/@headlessui-react/src/components/popover/popover.tsx b/packages/@headlessui-react/src/components/popover/popover.tsx
@@ -1015,7 +1015,7 @@ function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
   return (
     <PopoverPanelContext.Provider value={id}>
       <PopoverAPIContext.Provider value={{ close, isPortalled }}>
-        <Portal enabled={visible && portal}>
+        <Portal enabled={portal ? props.static || visible : false}>
           {visible && isPortalled && (
             <Hidden
               id={beforePanelSentinelId}