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) {