sorta get selected item to scroll into view virtualized

Author: yihuiliao

packages/@react-spectrum/s2/src/TableView.tsx

@@ -194,6 +194,9 @@ export class S2TableLayout<T> extends TableLayout<T> {
 
   protected buildCollection(): LayoutNode[] {
     let [header, body] = super.buildCollection();
+    if (!header) {
+      return [];
+    }
     let {children, layoutInfo} = body;
     // TableLayout's buildCollection always sets the body width to the max width between the header width, but
     // we want the body to be sticky and only as wide as the table so it is always in view if loading/empty

packages/@react-stately/layout/src/GridLayout.ts

@@ -227,7 +227,7 @@ export class GridLayout<T, O extends GridLayoutOptions = GridLayoutOptions> exte
     // Find the closest item within on either side of the point using the gap width.
     let key: Key | null = null;
     if (this.numColumns === 1) {
-      let searchRect = new Rect(x, Math.max(0, y - this.gap.height), 1, this.gap.height * 2);
+      let searchRect = new Rect(x, Math.max(0, y - this.gap.height), 1, Math.max(1, this.gap.height * 2));
       let candidates = this.getVisibleLayoutInfos(searchRect);
       let minDistance = Infinity;
       for (let candidate of candidates) {

packages/@react-stately/layout/src/ListLayout.ts

@@ -506,7 +506,7 @@ export class ListLayout<T, O extends ListLayoutOptions = ListLayoutOptions> exte
     y += this.virtualizer!.visibleRect.y;
 
     // Find the closest item within on either side of the point using the gap width.
-    let searchRect = new Rect(x, Math.max(0, y - this.gap), 1, this.gap * 2);
+    let searchRect = new Rect(x, Math.max(0, y - this.gap), 1, Math.max(1, this.gap * 2));
     let candidates = this.getVisibleLayoutInfos(searchRect);
     let key: Key | null = null;
     let minDistance = Infinity;

packages/@react-stately/layout/src/TableLayout.ts

@@ -85,6 +85,10 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
     this.stickyColumnIndices = [];
 
     let collection = this.virtualizer!.collection as TableCollection<T>;
+    if (collection.head?.key === -1) {
+      return [];
+    }
+
     for (let column of collection.columns) {
       // The selection cell and any other sticky columns always need to be visible.
       // In addition, row headers need to be in the DOM for accessibility labeling.
@@ -543,7 +547,7 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
     y += this.virtualizer!.visibleRect.y;
 
     // Find the closest item within on either side of the point using the gap width.
-    let searchRect = new Rect(x, Math.max(0, y - this.gap), 1, this.gap * 2);
+    let searchRect = new Rect(x, Math.max(0, y - this.gap), 1, Math.max(1, this.gap * 2));
     let candidates = this.getVisibleLayoutInfos(searchRect);
     let key: Key | null = null;
     let minDistance = Infinity;

packages/@react-stately/virtualizer/src/Rect.ts

@@ -92,7 +92,9 @@ export class Rect {
    * @param rect - The rectangle to check.
    */
   intersects(rect: Rect): boolean {
-    return this.x <= rect.x + rect.width
+    return this.area > 0 
+        && rect.area > 0 
+        && this.x <= rect.x + rect.width
         && rect.x <= this.x + this.width
         && this.y <= rect.y + rect.height
         && rect.y <= this.y + this.height;

packages/@react-stately/virtualizer/src/Virtualizer.ts

@@ -193,8 +193,7 @@ export class Virtualizer<T extends object, V> {
     } else {
       rect = this._overscanManager.getOverscannedRect();
     }
-
-    let layoutInfos = rect.area === 0 ? [] : this.layout.getVisibleLayoutInfos(rect);
+    let layoutInfos = this.layout.getVisibleLayoutInfos(rect);
     let map = new Map;
     for (let layoutInfo of layoutInfos) {
       map.set(layoutInfo.key, layoutInfo);

packages/react-aria-components/src/Virtualizer.tsx

@@ -102,10 +102,6 @@ function CollectionRoot({collection, persistedKeys, scrollRef, renderDropIndicat
     onScrollEnd: state.endScrolling
   }, scrollRef!);
 
-  if (state.contentSize.area === 0) {
-    return null;
-  }
-
   return (
     <div {...contentProps}>
       <VirtualizerContext.Provider value={state}>