From 5a5f96335748ff9d59f9f8693774d38095de5e2c Mon Sep 17 00:00:00 2001
From: Richard Bann <richard.bann@galaktika.solutions>
Date: Thu, 9 May 2024 21:23:11 +0000
Subject: [PATCH 1/3] add story

---
 .../list/stories/ListView.stories.tsx         | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/packages/@react-spectrum/list/stories/ListView.stories.tsx b/packages/@react-spectrum/list/stories/ListView.stories.tsx
index 4ce91b6d404..140dc0d9661 100644
--- a/packages/@react-spectrum/list/stories/ListView.stories.tsx
+++ b/packages/@react-spectrum/list/stories/ListView.stories.tsx
@@ -517,3 +517,23 @@ function Demo(props) {
     </ListView>
   );
 }
+
+const manyItems = [];
+for (let i = 0; i < 100; i++) {manyItems.push({key: i, name: `item ${i}`});}
+
+export const DisplayNone: ListViewStory = {
+  render: (args) => (
+    <div style={{display: 'none'}}>
+      <ListView aria-label="Dynamic items" items={manyItems} width="300px" height="200px" {...args}>
+        {(item: any) => (
+          <Item key={item.key} textValue={item.name}>
+            <Text>
+              {item.name}
+            </Text>
+          </Item>
+          )}
+      </ListView>
+    </div>
+  ),
+  name: 'display: none with many items'
+};

From 68ba4a7d54ab41572239df2e8e3f716cf5fa65a1 Mon Sep 17 00:00:00 2001
From: Richard Bann <richard.bann@galaktika.solutions>
Date: Thu, 9 May 2024 21:23:41 +0000
Subject: [PATCH 2/3] fix ListLayout when rect height = 0

---
 packages/@react-stately/layout/src/ListLayout.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@react-stately/layout/src/ListLayout.ts b/packages/@react-stately/layout/src/ListLayout.ts
index 14823bd96ad..4564b5e5450 100644
--- a/packages/@react-stately/layout/src/ListLayout.ts
+++ b/packages/@react-stately/layout/src/ListLayout.ts
@@ -205,7 +205,7 @@ export class ListLayout<T> extends Layout<Node<T>> implements KeyboardDelegate,
 
       let layoutNode = this.buildChild(node, 0, y);
       y = layoutNode.layoutInfo.rect.maxY;
-      nodes.push(layoutNode);
+      this.validRect.height && nodes.push(layoutNode);
 
       if (node.type === 'item' && y > this.validRect.maxY) {
         y += (this.collection.size - (nodes.length + skipped)) * rowHeight;

From 0b3475506bcc51860104bd48bb8b67adb9028241 Mon Sep 17 00:00:00 2001
From: Richard Bann <richard.bann@galaktika.solutions>
Date: Fri, 10 May 2024 19:21:50 +0000
Subject: [PATCH 3/3] ListLayout won't update item size to 0

---
 .../list/stories/ListView.stories.tsx         | 22 ++++++++++++++-----
 .../@react-stately/layout/src/ListLayout.ts   |  4 ++--
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/@react-spectrum/list/stories/ListView.stories.tsx b/packages/@react-spectrum/list/stories/ListView.stories.tsx
index 140dc0d9661..350073f7d28 100644
--- a/packages/@react-spectrum/list/stories/ListView.stories.tsx
+++ b/packages/@react-spectrum/list/stories/ListView.stories.tsx
@@ -519,12 +519,18 @@ function Demo(props) {
 }
 
 const manyItems = [];
-for (let i = 0; i < 100; i++) {manyItems.push({key: i, name: `item ${i}`});}
+for (let i = 0; i < 500; i++) {manyItems.push({key: i, name: `item ${i}`});}
 
-export const DisplayNone: ListViewStory = {
-  render: (args) => (
-    <div style={{display: 'none'}}>
-      <ListView aria-label="Dynamic items" items={manyItems} width="300px" height="200px" {...args}>
+function DisplayNoneComponent(args) {
+  const [isDisplay, setIsDisplay] = useState(false);
+  useEffect(() => {
+    const timeout = setTimeout(() => setIsDisplay(true), 10000);
+    return () => clearTimeout(timeout);
+  }, []);
+
+  return (
+    <div style={!isDisplay ? {display: 'none'} : null}>
+      <ListView aria-label="Many items" items={manyItems} width="300px" height="200px" {...args}>
         {(item: any) => (
           <Item key={item.key} textValue={item.name}>
             <Text>
@@ -534,6 +540,10 @@ export const DisplayNone: ListViewStory = {
           )}
       </ListView>
     </div>
-  ),
+  );
+}
+
+export const DisplayNone: ListViewStory = {
+  render: (args) => <DisplayNoneComponent {...args} />,
   name: 'display: none with many items'
 };
diff --git a/packages/@react-stately/layout/src/ListLayout.ts b/packages/@react-stately/layout/src/ListLayout.ts
index 4564b5e5450..5ef284aa586 100644
--- a/packages/@react-stately/layout/src/ListLayout.ts
+++ b/packages/@react-stately/layout/src/ListLayout.ts
@@ -205,8 +205,7 @@ export class ListLayout<T> extends Layout<Node<T>> implements KeyboardDelegate,
 
       let layoutNode = this.buildChild(node, 0, y);
       y = layoutNode.layoutInfo.rect.maxY;
-      this.validRect.height && nodes.push(layoutNode);
-
+      nodes.push(layoutNode);
       if (node.type === 'item' && y > this.validRect.maxY) {
         y += (this.collection.size - (nodes.length + skipped)) * rowHeight;
         break;
@@ -383,6 +382,7 @@ export class ListLayout<T> extends Layout<Node<T>> implements KeyboardDelegate,
   }
 
   updateItemSize(key: Key, size: Size) {
+    if (size.height === 0) {return false;}
     let layoutInfo = this.layoutInfos.get(key);
     // If no layoutInfo, item has been deleted/removed.
     if (!layoutInfo) {