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

Author: RobinMalfait

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
 

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

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

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,

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}