Add more sophisticated logic for "last focused" render region

Author: NickGerleman

Libraries/Lists/VirtualizedList.js

@@ -757,7 +757,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
   static _createRenderMask(
     props: Props,
     cellsAroundViewport: {first: number, last: number},
-    lastFocusedItem: ?number,
+    additionalRegions?: ?$ReadOnlyArray<{first: number, last: number}>,
   ): CellRenderMask {
     const itemCount = props.getItemCount(props.data);
 
@@ -770,17 +770,12 @@ class VirtualizedList extends React.PureComponent<Props, State> {
 
     const renderMask = new CellRenderMask(itemCount);
 
-    // Keep the items around the last focused rendered, to allow for keyboard
-    // navigation
-    if (lastFocusedItem) {
-      const first = Math.max(0, lastFocusedItem - 1);
-      const last = Math.min(itemCount - 1, lastFocusedItem + 1);
-      renderMask.addCells({first, last});
-    }
-
     if (itemCount > 0) {
-      if (cellsAroundViewport.last >= cellsAroundViewport.first) {
-        renderMask.addCells(cellsAroundViewport);
+      const allRegions = [cellsAroundViewport, ...(additionalRegions ?? [])];
+      for (const region of allRegions) {
+        if (region.last >= region.first) {
+          renderMask.addCells(region);
+        }
       }
 
       // The initially rendered cells are retained as part of the
@@ -1018,7 +1013,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
           prevCellKey={prevCellKey}
           onUpdateSeparators={this._onUpdateSeparators}
           onLayout={e => this._onCellLayout(e, key, ii)}
-          onFocusCapture={e => this._onCellFocusCapture(ii)}
+          onFocusCapture={e => this._onCellFocusCapture(key)}
           onUnmount={this._onCellUnmount}
           parentProps={this.props}
           ref={ref => {
@@ -1366,7 +1361,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
   _averageCellLength = 0;
   // Maps a cell key to the set of keys for all outermost child lists within that cell
   _cellKeysToChildListKeys: Map<string, Set<string>> = new Map();
-  _cellRefs = {};
+  _cellRefs: {[string]: ?CellRenderer} = {};
   _fillRateHelper: FillRateHelper;
   _frames = {};
   _footerLength = 0;
@@ -1378,7 +1373,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
   _hiPriInProgress: boolean = false; // flag to prevent infinite hiPri cell limit update
   _highestMeasuredFrameIndex = 0;
   _indicesToKeys: Map<number, string> = new Map();
-  _lastFocusedItem: ?number = null;
+  _lastFocusedCellKey: ?string = null;
   _nestedChildLists: Map<
     string,
     {
@@ -1487,12 +1482,12 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     this._updateViewableItems(this.props.data);
   }
 
-  _onCellFocusCapture(itemIndex: number) {
-    this._lastFocusedItem = itemIndex;
+  _onCellFocusCapture(cellKey: string) {
+    this._lastFocusedCellKey = cellKey;
     const renderMask = VirtualizedList._createRenderMask(
       this.props,
       this.state.cellsAroundViewport,
-      this._lastFocusedItem,
+      this._getNonViewportRenderRegions(),
     );
 
     if (!renderMask.equals(this.state.renderMask)) {
@@ -1928,7 +1923,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       const renderMask = VirtualizedList._createRenderMask(
         props,
         cellsAroundViewport,
-        this._lastFocusedItem,
+        this._getNonViewportRenderRegions(),
       );
 
       if (
@@ -2000,6 +1995,57 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     return frame;
   };
 
+  _getNonViewportRenderRegions = (): $ReadOnlyArray<{
+    first: number,
+    last: number,
+  }> => {
+    // Keep a viewport's worth of content around the last focused cell to allow
+    // random navigation around it without any blanking. E.g. tabbing from one
+    // focused item out of viewport to another.
+    if (
+      !(this._lastFocusedCellKey && this._cellRefs[this._lastFocusedCellKey])
+    ) {
+      return [];
+    }
+
+    const lastFocusedCellRenderer = this._cellRefs[this._lastFocusedCellKey];
+    const focusedCellIndex = lastFocusedCellRenderer.props.index;
+    const itemCount = this.props.getItemCount(this.props.data);
+
+    // The cell may have been unmounted and have a stale index
+    if (
+      focusedCellIndex >= itemCount ||
+      this._indicesToKeys.get(focusedCellIndex) !== this._lastFocusedCellKey
+    ) {
+      return [];
+    }
+
+    let first = focusedCellIndex;
+    let heightOfCellsBeforeFocused = 0;
+    for (
+      let i = first - 1;
+      i >= 0 && heightOfCellsBeforeFocused < this._scrollMetrics.visibleLength;
+      i--
+    ) {
+      first--;
+      heightOfCellsBeforeFocused += this._getFrameMetricsApprox(i).length;
+    }
+
+    let last = focusedCellIndex;
+    let heightOfCellsAfterFocused = 0;
+    for (
+      let i = last + 1;
+      i < itemCount &&
+      heightOfCellsAfterFocused < this._scrollMetrics.visibleLength;
+      i++
+    ) {
+      last++;
+      heightOfCellsAfterFocused += this._getFrameMetricsApprox(i).length;
+    }
+
+    return [{first, last}];
+  };
+
   _updateViewableItems(data: any) {
     const {getItemCount} = this.props;
 

Libraries/Lists/__tests__/VirtualizedList-test.js

@@ -1445,7 +1445,7 @@ it('renders windowSize derived region at bottom', () => {
   expect(component).toMatchSnapshot();
 });
 
-it('keeps last focused item rendered', () => {
+it('keeps viewport below last focused rendered', () => {
   const items = generateItems(20);
   const ITEM_HEIGHT = 10;
 
@@ -1479,24 +1479,147 @@ it('keeps last focused item rendered', () => {
     performAllBatches();
   });
 
-  // Cells 1-4 should remain rendered after scrolling to the bottom of the list
+  // Cells 1-8 should remain rendered after scrolling to the bottom of the list
   expect(component).toMatchSnapshot();
+});
+
+it('virtualizes away last focused item if focus changes to a new cell', () => {
+  const items = generateItems(20);
+  const ITEM_HEIGHT = 10;
+
+  let component;
+  ReactTestRenderer.act(() => {
+    component = ReactTestRenderer.create(
+      <VirtualizedList
+        initialNumToRender={1}
+        windowSize={1}
+        {...baseItemProps(items)}
+        {...fixedHeightItemLayoutProps(ITEM_HEIGHT)}
+      />,
+    );
+  });
+
+  ReactTestRenderer.act(() => {
+    simulateLayout(component, {
+      viewport: {width: 10, height: 50},
+      content: {width: 10, height: 200},
+    });
+
+    performAllBatches();
+  });
+
+  ReactTestRenderer.act(() => {
+    component.getInstance()._onCellFocusCapture(3);
+  });
+
+  ReactTestRenderer.act(() => {
+    simulateScroll(component, {x: 0, y: 150});
+    performAllBatches();
+  });
 
   ReactTestRenderer.act(() => {
     component.getInstance()._onCellFocusCapture(17);
   });
 
-  // Cells 2-4 should no longer be rendered after focus is moved to the end of
+  // Cells 1-8 should no longer be rendered after focus is moved to the end of
   // the list
   expect(component).toMatchSnapshot();
+});
+
+it('keeps viewport above last focused rendered', () => {
+  const items = generateItems(20);
+  const ITEM_HEIGHT = 10;
+
+  let component;
+  ReactTestRenderer.act(() => {
+    component = ReactTestRenderer.create(
+      <VirtualizedList
+        initialNumToRender={1}
+        windowSize={1}
+        {...baseItemProps(items)}
+        {...fixedHeightItemLayoutProps(ITEM_HEIGHT)}
+      />,
+    );
+  });
+
+  ReactTestRenderer.act(() => {
+    simulateLayout(component, {
+      viewport: {width: 10, height: 50},
+      content: {width: 10, height: 200},
+    });
+
+    performAllBatches();
+  });
+
+  ReactTestRenderer.act(() => {
+    component.getInstance()._onCellFocusCapture(3);
+  });
+
+  ReactTestRenderer.act(() => {
+    simulateScroll(component, {x: 0, y: 150});
+    performAllBatches();
+  });
+
+  ReactTestRenderer.act(() => {
+    component.getInstance()._onCellFocusCapture(17);
+  });
 
   ReactTestRenderer.act(() => {
     simulateScroll(component, {x: 0, y: 0});
     performAllBatches();
   });
 
-  // Cells 16-18 should remain rendered after scrolling back to the top of the
-  // list
+  // Cells 12-19 should remain rendered after scrolling to the top of the list
+  expect(component).toMatchSnapshot();
+});
+
+it('virtualizes away last focused index if item removed', () => {
+  const items = generateItems(20);
+  const ITEM_HEIGHT = 10;
+
+  let component;
+  ReactTestRenderer.act(() => {
+    component = ReactTestRenderer.create(
+      <VirtualizedList
+        initialNumToRender={1}
+        windowSize={1}
+        {...baseItemProps(items)}
+        {...fixedHeightItemLayoutProps(ITEM_HEIGHT)}
+      />,
+    );
+  });
+
+  ReactTestRenderer.act(() => {
+    simulateLayout(component, {
+      viewport: {width: 10, height: 50},
+      content: {width: 10, height: 200},
+    });
+
+    performAllBatches();
+  });
+
+  ReactTestRenderer.act(() => {
+    component.getInstance()._onCellFocusCapture(3);
+  });
+
+  ReactTestRenderer.act(() => {
+    simulateScroll(component, {x: 0, y: 150});
+    performAllBatches();
+  });
+
+  const itemsWithoutFocused = [...items.slice(0, 3), ...items.slice(4)];
+  ReactTestRenderer.act(() => {
+    component.update(
+      <VirtualizedList
+        initialNumToRender={1}
+        windowSize={1}
+        {...baseItemProps(itemsWithoutFocused)}
+        {...fixedHeightItemLayoutProps(ITEM_HEIGHT)}
+      />,
+    );
+  });
+
+  // Cells 1-8 should no longer be rendered
   expect(component).toMatchSnapshot();
 });