feat: add virtualization to S2 combobox and picker (#8110)

* set overflow to visible on ListLayout

* add separator height to list layout

* change css for picker and combobox

* fix separator height

* fix picker's separator

* cleanup

* update yarn lock

* fix lint

* remove workflow dependency

* remove style from s1 theme oops

* fix lint

* picker fixes

* picker cleanup

* fix lint

* fix line height in header

* fix lint?

* update grid areas and fix edgeToText

* fix install?

* fix sizes

* fix lint

* fix delay when opening many items S2 select

* sorta get selected item to scroll into view virtualized

* fix tests

* cleanup fix lint

* more cleanup

* fix overflow on windows potentially...

* fix s2 picker scroll selected item into view

* fix lint

* update yarn lock

* remove comment

* review follow-up

* fix v3 picker selection and fix tests

* simplify separator

* fix lint

* fix css according to theme update

* consolidate some of the css

* clean up raf

---------

Co-authored-by: Daniel Lu <[email protected]>

Author: yihuiliao

packages/@react-aria/selection/src/useSelectableCollection.ts

@@ -505,6 +505,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
 
   // Scroll the focused element into view when the focusedKey changes.
   let lastFocusedKey = useRef(manager.focusedKey);
+  let raf = useRef<number | null>(null);
   useEffect(() => {
     if (manager.isFocused && manager.focusedKey != null && (manager.focusedKey !== lastFocusedKey.current || didAutoFocusRef.current) && scrollRef.current && ref.current) {
       let modality = getInteractionModality();
@@ -516,8 +517,16 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
       }
 
       if (modality === 'keyboard' || didAutoFocusRef.current) {
-        scrollIntoView(scrollRef.current, element);
 
+        if (raf.current) {
+          cancelAnimationFrame(raf.current);
+        }
+
+        raf.current = requestAnimationFrame(() => {
+          if (scrollRef.current) {
+            scrollIntoView(scrollRef.current, element);
+          }
+        });
         // Avoid scroll in iOS VO, since it may cause overlay to close (i.e. RAC submenu)
         if (modality !== 'virtual') {
           scrollIntoViewport(element, {containingElement: ref.current});
@@ -534,6 +543,14 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
     didAutoFocusRef.current = false;
   });
 
+  useEffect(() => {
+    return () => {
+      if (raf.current) {
+        cancelAnimationFrame(raf.current);
+      }
+    };
+  }, []);
+
   // Intercept FocusScope restoration since virtualized collections can reuse DOM nodes.
   useEvent(ref, 'react-aria-focus-scope-restore', e => {
     e.preventDefault();

packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js

@@ -143,6 +143,7 @@ describe('SearchAutocomplete', function () {
     user = userEvent.setup({delay: null, pointerMap});
     jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(() => 1000);
     jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(() => 1000);
+    jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(() => 50);
     window.HTMLElement.prototype.scrollIntoView = jest.fn();
     simulateDesktop();
     jest.useFakeTimers();

packages/@react-spectrum/card/test/CardView.test.js

@@ -144,6 +144,10 @@ describe('CardView', function () {
     jest.useFakeTimers();
   });
 
+  beforeEach(() => {
+    jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(() => 50);
+  });
+
   afterEach(() => {
     jest.clearAllMocks();
     act(() => jest.runAllTimers());

packages/@react-spectrum/color/test/ColorPicker.test.js

@@ -22,9 +22,14 @@ describe('ColorPicker', function () {
 
   beforeAll(() => {
     user = userEvent.setup({delay: null, pointerMap});
+    jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(() => 50);
     jest.useFakeTimers();
   });
 
+  afterAll(function () {
+    jest.restoreAllMocks();
+  });
+
   afterEach(() => {
     act(() => {jest.runAllTimers();});
   });

packages/@react-spectrum/combobox/test/ComboBox.test.js

@@ -257,6 +257,7 @@ describe('ComboBox', function () {
   });
 
   beforeEach(() => {
+    jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(() => 50);
     load = jest
       .fn()
       .mockImplementationOnce(getFilterItems)

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

@@ -73,6 +73,7 @@ describe('ListView', function () {
   afterEach(function () {
     fireEvent.keyDown(document.activeElement, {key: 'Escape'});
     fireEvent.keyUp(document.activeElement, {key: 'Escape'});
+    act(() => {jest.runAllTimers();});
     jest.clearAllMocks();
   });
 
@@ -1453,27 +1454,33 @@ describe('ListView', function () {
 
       // scroll us down far enough that item 0 isn't in the view
       moveFocus('ArrowDown');
+      act(() => jest.runAllTimers());
       expect(scrollIntoView).toHaveBeenLastCalledWith(grid, getRow(tree, 'Item 1'));
       grid.scrollTop = 40;
       fireEvent.scroll(grid);
       moveFocus('ArrowDown');
+      act(() => jest.runAllTimers());
       expect(scrollIntoView).toHaveBeenLastCalledWith(grid, getRow(tree, 'Item 2'));
       grid.scrollTop = 80;
       fireEvent.scroll(grid);
       moveFocus('ArrowDown');
+      act(() => jest.runAllTimers());
       expect(scrollIntoView).toHaveBeenLastCalledWith(grid, getRow(tree, 'Item 3'));
       grid.scrollTop = 120;
       fireEvent.scroll(grid);
 
       moveFocus('ArrowUp');
+      act(() => jest.runAllTimers());
       expect(scrollIntoView).toHaveBeenLastCalledWith(grid, getRow(tree, 'Item 2'));
       grid.scrollTop = 80;
       fireEvent.scroll(grid);
       moveFocus('ArrowUp');
+      act(() => jest.runAllTimers());
       expect(scrollIntoView).toHaveBeenLastCalledWith(grid, getRow(tree, 'Item 1'));
       grid.scrollTop = 40;
       fireEvent.scroll(grid);
       moveFocus('ArrowUp');
+      act(() => jest.runAllTimers());
       expect(scrollIntoView).toHaveBeenLastCalledWith(grid, getRow(tree, 'Item 0'));
     });
 
@@ -1506,6 +1513,7 @@ describe('ListView', function () {
       });
 
       focusRow(tree, 'Item 1');
+      act(() => jest.runAllTimers());
       expect(document.activeElement).toBe(getRow(tree, 'Item 1'));
       expect(scrollIntoView).toHaveBeenLastCalledWith(grid, document.activeElement);
     });
@@ -1539,6 +1547,7 @@ describe('ListView', function () {
 
       // Moving focus should scroll the new focused item into view
       moveFocus('ArrowDown');
+      act(() => jest.runAllTimers());
       expect(document.activeElement).toBe(getRow(tree, 'Item 1'));
       expect(scrollIntoView).toHaveBeenLastCalledWith(body, document.activeElement);
     });

packages/@react-spectrum/picker/test/Picker.test.js

@@ -31,7 +31,7 @@ import {User} from '@react-aria/test-utils';
 import userEvent from '@testing-library/user-event';
 
 describe('Picker', function () {
-  let offsetWidth, offsetHeight;
+  let offsetWidth, offsetHeight, scrollHeight;
   let onSelectionChange = jest.fn();
   let testUtilUser = new User();
   let user;
@@ -40,13 +40,15 @@ describe('Picker', function () {
     user = userEvent.setup({delay: null, pointerMap});
     offsetWidth = jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(() => 1000);
     offsetHeight = jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(() => 1000);
+    scrollHeight = jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(() => 50);
     simulateDesktop();
     jest.useFakeTimers();
   });
 
   afterAll(function () {
     offsetWidth.mockReset();
     offsetHeight.mockReset();
+    scrollHeight.mockReset();
   });
 
   afterEach(() => {

packages/@react-spectrum/picker/test/TempUtilTest.test.js

@@ -27,9 +27,14 @@ describe('Picker/Select ', function () {
 
   beforeAll(function () {
     user = userEvent.setup({delay: null, pointerMap});
+    jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(() => 50);
     simulateDesktop();
   });
 
+  afterAll(function () {
+    jest.restoreAllMocks();
+  });
+
   describe('with real timers', function () {
     beforeAll(function () {
       jest.useRealTimers();