Only render virtual options wrapper when there are items to show (#3161)

* Only render virtual options wrapper when there are items to show * Update changelog
tailwindlabs · May 1, 2024 · db702a7 · db702a7
1 parent 5952268
commit db702a7
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
@@ -32,6 +32,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Only check for elements in `useInertOthers` ([#3154](https://github.com/tailwindlabs/headlessui/pull/3154))
 - Fix anchored elements not flipping when there is padding ([#3157](https://github.com/tailwindlabs/headlessui/pull/3157))
 - Render virtual items during an exiting transition ([#3160](https://github.com/tailwindlabs/headlessui/pull/3160))
+- Only render virtual options wrapper when there are items to show ([#3161](https://github.com/tailwindlabs/headlessui/pull/3161))
 
 ### Changed
 

diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx
@@ -449,6 +449,12 @@ function VirtualProvider(props: {
     setBaseKey((v) => v + 1)
   }, [data.virtual?.options])
 
+  let items = virtualizer.getVirtualItems()
+
+  if (items.length === 0) {
+    return null
+  }
+
   return (
     <VirtualContext.Provider value={virtualizer}>
       <div
@@ -483,7 +489,7 @@ function VirtualProvider(props: {
           }
         }}
       >
-        {virtualizer.getVirtualItems().map((item) => {
+        {items.map((item) => {
           return (
             <Fragment key={item.key}>
               {React.cloneElement(