Fix ListView arrow navigation scrolling (#2560)

Author: snowystinger

packages/@react-spectrum/list/test/ListView.test.js

@@ -232,7 +232,7 @@ describe('ListView', function () {
         expect(document.activeElement).toBe(start);
       });
 
-      it('should mov focus to above row', function () {
+      it('should move focus to above row', function () {
         let tree = renderListWithFocusables();
         let start = getCell(tree, 'Bar');
         let end = getCell(tree, 'Foo');
@@ -372,4 +372,71 @@ describe('ListView', function () {
       });
     });
   });
+
+  describe('scrolling', function () {
+    beforeAll(() => {
+      jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get')
+        .mockImplementation(function () {
+          return 40;
+        });
+    });
+
+    let moveFocus = (key, opts = {}) => {
+      fireEvent.keyDown(document.activeElement, {key, ...opts});
+      fireEvent.keyUp(document.activeElement, {key, ...opts});
+    };
+
+    it('should scroll to a cell when it is focused', function () {
+      let onSelectionChange = jest.fn();
+
+      let tree = render(
+        <ListView
+          width="250px"
+          height="60px"
+          aria-label="List"
+          data-testid="test"
+          selectionStyle="highlight"
+          selectionMode="multiple"
+          onSelectionChange={onSelectionChange}
+          items={[...Array(20).keys()].map(k => ({key: k, name: `Item ${k}`}))}>
+          {item => <Item>{item.name}</Item>}
+        </ListView>
+      );
+      let grid = tree.getByRole('grid');
+      Object.defineProperty(grid, 'clientHeight', {
+        get() {
+          return 60;
+        }
+      });
+      // fire resize so the new clientHeight is requested
+      act(() => {
+        fireEvent(window, new Event('resize'));
+      });
+      userEvent.tab();
+      expect(grid.scrollTop).toBe(0);
+
+      let rows = tree.getAllByRole('row');
+      let rowWrappers = rows.map(item => item.parentElement);
+
+      expect(rowWrappers[0].style.top).toBe('0px');
+      expect(rowWrappers[0].style.height).toBe('40px');
+      expect(rowWrappers[1].style.top).toBe('40px');
+      expect(rowWrappers[1].style.height).toBe('40px');
+      expect(rowWrappers[2].style.top).toBe('80px');
+      expect(rowWrappers[2].style.height).toBe('40px');
+
+      // scroll us down far enough that item 0 isn't in the view
+      moveFocus('ArrowDown');
+      moveFocus('ArrowDown');
+      moveFocus('ArrowDown');
+      expect(document.activeElement).toBe(getCell(tree, 'Item 3'));
+      expect(grid.scrollTop).toBe(100);
+
+      moveFocus('ArrowUp');
+      moveFocus('ArrowUp');
+      moveFocus('ArrowUp');
+      expect(document.activeElement).toBe(getCell(tree, 'Item 0'));
+      expect(grid.scrollTop).toBe(0);
+    });
+  });
 });

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

@@ -935,7 +935,8 @@ export class Virtualizer<T extends object, V, W> {
    * @param duration The duration of the scroll animation.
    */
   scrollToItem(key: Key, options?: ScrollToItemOptions) {
-    if (!key) {
+    // key can be 0, so check if null or undefined
+    if (key == null) {
       return;
     }