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
2024-05-01 09:56:48 -04:00
parent 5952268bf7
commit db702a7cec
2 changed files with 8 additions and 1 deletions
@@ -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

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