diff --git a/packages/@react-spectrum/list/stories/ListView.stories.tsx b/packages/@react-spectrum/list/stories/ListView.stories.tsx
index 4ce91b6d404..350073f7d28 100644
--- a/packages/@react-spectrum/list/stories/ListView.stories.tsx
+++ b/packages/@react-spectrum/list/stories/ListView.stories.tsx
@@ -517,3 +517,33 @@ function Demo(props) {
);
}
+
+const manyItems = [];
+for (let i = 0; i < 500; i++) {manyItems.push({key: i, name: `item ${i}`});}
+
+function DisplayNoneComponent(args) {
+ const [isDisplay, setIsDisplay] = useState(false);
+ useEffect(() => {
+ const timeout = setTimeout(() => setIsDisplay(true), 10000);
+ return () => clearTimeout(timeout);
+ }, []);
+
+ return (
+
+
+ {(item: any) => (
+ -
+
+ {item.name}
+
+
+ )}
+
+
+ );
+}
+
+export const DisplayNone: ListViewStory = {
+ render: (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 f362c96acd9..170fc7bcf09 100644
--- a/packages/@react-stately/layout/src/ListLayout.ts
+++ b/packages/@react-stately/layout/src/ListLayout.ts
@@ -237,7 +237,6 @@ export class ListLayout extends Layout, ListLayoutProps> implements K
let layoutNode = this.buildChild(node, 0, y);
y = layoutNode.layoutInfo.rect.maxY;
nodes.push(layoutNode);
-
if (node.type === 'item' && y > this.validRect.maxY) {
y += (this.collection.size - (nodes.length + skipped)) * rowHeight;
break;
@@ -432,6 +431,7 @@ export class ListLayout extends Layout, ListLayoutProps> implements K
}
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) {