update ScrollView to fix ComboBox tests

the issue was that updateSize was being called before the listboxref was attached due to it being immediatelly called in the test. The change makes it so the updateSize is called in the next render instead

Author: LFDanLu

packages/@react-aria/virtualizer/src/ScrollView.tsx

@@ -98,7 +98,6 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
       // Prevent rubber band scrolling from shaking when scrolling out of bounds
       state.scrollTop = Math.max(0, Math.min(scrollTop, contentSize.height - state.height));
       state.scrollLeft = Math.max(0, Math.min(scrollLeft, contentSize.width - state.width));
-
       onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, state.width, state.height));
 
       if (!state.isScrolling) {
@@ -199,6 +198,8 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
 
   // Update visible rect when the content size changes, in case scrollbars need to appear or disappear.
   let lastContentSize = useRef<Size | null>(null);
+  let [, setUpdate] = useState({});
+  let queuedUpdateSize = useRef(false);
   useLayoutEffect(() => {
     if (!isUpdatingSize.current && (lastContentSize.current == null || !contentSize.equals(lastContentSize.current))) {
       // React doesn't allow flushSync inside effects, so queue a microtask.
@@ -209,12 +210,22 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
       // https://github.com/reactwg/react-18/discussions/102
       // @ts-ignore
       if (typeof IS_REACT_ACT_ENVIRONMENT === 'boolean' ? IS_REACT_ACT_ENVIRONMENT : typeof jest !== 'undefined') {
-        updateSize(fn => fn());
+        // Queue call of updateSize to happen in a separate render but within the same act so that RAC virtualized ComboBoxes and Selects
+        // work properly
+        queuedUpdateSize.current = true;
+        setUpdate({});
+        lastContentSize.current = contentSize;
+        return;
       } else {
         queueMicrotask(() => updateSize(flushSync));
       }
     }
 
+    if (queuedUpdateSize.current) {
+      queuedUpdateSize.current = false;
+      updateSize(fn => fn());
+    }
+
     lastContentSize.current = contentSize;
   });
 

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

@@ -1025,6 +1025,9 @@ describe('Picker', function () {
       expect(document.activeElement).toBe(picker);
       expect(picker).toHaveTextContent('Empty');
 
+      // TODO: this test (along with others in this suite) fails because we seem to be detecting that the button is being focused after the
+      // dropdown is opened, resulting in the dropdown closing due to useOverlay interactOutside logic
+      // Seems to specifically happen if the Picker has a selected item and the user tries to open the Picker
       await selectTester.selectOption({option: 'Zero'});
       expect(onSelectionChange).toHaveBeenCalledTimes(2);
       expect(onSelectionChange).toHaveBeenLastCalledWith('0');

packages/@react-spectrum/s2/chromatic/Combobox.stories.tsx

@@ -142,5 +142,9 @@ export const Filtering = {
     await waitFor(() => {
       expect(within(body).getByRole('progressbar', {hidden: true})).toBeInTheDocument();
     }, {timeout: 5000});
+
+    await waitFor(() => {
+      expect(within(listbox).queryByRole('progressbar', {hidden: true})).toBeFalsy();
+    }, {timeout: 5000});
   }
 };

packages/@react-spectrum/s2/test/Combobox.test.tsx

@@ -0,0 +1,97 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {act, render, setupIntersectionObserverMock, within} from '@react-spectrum/test-utils-internal';
+import {ComboBox, ComboBoxItem} from '../src';
+import React from 'react';
+import {User} from '@react-aria/test-utils';
+
+describe('Combobox', () => {
+  let testUtilUser = new User();
+
+  beforeAll(function () {
+    jest.useFakeTimers();
+    jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(() => 100);
+    jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(() => 100);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    act(() => jest.runAllTimers());
+  });
+
+  afterAll(function () {
+    jest.restoreAllMocks();
+  });
+
+  it('should render the sentinel when the combobox is empty', async () => {
+    let tree = render(
+      <ComboBox label="test">
+        {[]}
+      </ComboBox>
+    );
+
+    let comboboxTester = testUtilUser.createTester('ComboBox', {root: tree.container});
+    expect(comboboxTester.listbox).toBeFalsy();
+    comboboxTester.setInteractionType('mouse');
+    await comboboxTester.open();
+
+    expect(comboboxTester.options()).toHaveLength(1);
+    expect(within(comboboxTester.listbox!).getByTestId('loadMoreSentinel')).toBeInTheDocument();
+  });
+
+  // TODO: will need to update these tests when I replace isLoading with colection in useLoadMoreSentinel
+  it('should only call loadMore if loading is false', async () => {
+    let onLoadMore = jest.fn();
+    let observe = jest.fn();
+    let observer = setupIntersectionObserverMock({
+      observe
+    });
+
+    let tree = render(
+      <ComboBox label="test" loadingState="loadingMore" onLoadMore={onLoadMore}>
+        <ComboBoxItem>Chocolate</ComboBoxItem>
+        <ComboBoxItem>Mint</ComboBoxItem>
+        <ComboBoxItem>Strawberry</ComboBoxItem>
+        <ComboBoxItem>Vanilla</ComboBoxItem>
+        <ComboBoxItem>Chocolate Chip Cookie Dough</ComboBoxItem>
+      </ComboBox>
+    );
+
+    let comboboxTester = testUtilUser.createTester('ComboBox', {root: tree.container});
+    expect(comboboxTester.listbox).toBeFalsy();
+    comboboxTester.setInteractionType('mouse');
+    await comboboxTester.open();
+
+    expect(onLoadMore).toHaveBeenCalledTimes(0);
+    let sentinel = tree.getByTestId('loadMoreSentinel');
+    expect(observe).toHaveBeenLastCalledWith(sentinel);
+
+
+    act(() => {observer.instance.triggerCallback([{isIntersecting: true}]);});
+    act(() => {jest.runAllTimers();});
+
+    tree.rerender(
+      <ComboBox label="test" loadingState="idle" onLoadMore={onLoadMore}>
+        <ComboBoxItem>Chocolate</ComboBoxItem>
+        <ComboBoxItem>Mint</ComboBoxItem>
+        <ComboBoxItem>Strawberry</ComboBoxItem>
+        <ComboBoxItem>Vanilla</ComboBoxItem>
+        <ComboBoxItem>Chocolate Chip Cookie Dough</ComboBoxItem>
+      </ComboBox>
+    );
+
+    act(() => {observer.instance.triggerCallback([{isIntersecting: true}]);});
+    act(() => {jest.runAllTimers();});
+    expect(onLoadMore).toHaveBeenCalledTimes(1);
+  });
+});

packages/react-aria-components/test/ComboBox.test.js

@@ -11,7 +11,7 @@
  */
 
 import {act} from '@testing-library/react';
-import {Button, ComboBox, ComboBoxContext, FieldError, Header, Input, Label, ListBox, ListBoxItem, ListBoxSection, Popover, Text} from '../';
+import {Button, ComboBox, ComboBoxContext, FieldError, Header, Input, Label, ListBox, ListBoxItem, ListBoxSection, ListLayout, Popover, Text, Virtualizer} from '../';
 import {fireEvent, pointerMap, render, within} from '@react-spectrum/test-utils-internal';
 import React from 'react';
 import {User} from '@react-aria/test-utils';
@@ -38,8 +38,15 @@ describe('ComboBox', () => {
   let user;
   let testUtilUser = new User();
   beforeAll(() => {
+    jest.useFakeTimers();
     user = userEvent.setup({delay: null, pointerMap});
   });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    act(() => jest.runAllTimers());
+  });
+
   it('provides slots', async () => {
     let {getByRole} = render(<TestComboBox />);
 
@@ -295,4 +302,42 @@ describe('ComboBox', () => {
 
     expect(queryByRole('listbox')).not.toBeInTheDocument();
   });
+
+  it('should support virtualizer', async () => {
+    let items = [];
+    for (let i = 0; i < 50; i++) {
+      items.push({id: i, name: 'Item ' + i});
+    }
+
+    jest.restoreAllMocks(); // don't mock scrollTop for this test
+    jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(() => 100);
+    jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(() => 100);
+
+    let tree = render(
+      <ComboBox >
+        <Label style={{display: 'block'}}>Test</Label>
+        <div style={{display: 'flex'}}>
+          <Input />
+          <Button>
+            <span aria-hidden="true" style={{padding: '0 2px'}}>▼</span>
+          </Button>
+        </div>
+        <Popover>
+          <Virtualizer layout={ListLayout} layoutOptions={{rowHeight: 25}}>
+            <ListBox items={items}>
+              {(item) => <ListBoxItem>{item.name}</ListBoxItem>}
+            </ListBox>
+          </Virtualizer>
+        </Popover>
+      </ComboBox>
+    );
+
+
+    let comboboxTester = testUtilUser.createTester('ComboBox', {root: tree.container});
+    expect(comboboxTester.listbox).toBeFalsy();
+    comboboxTester.setInteractionType('mouse');
+    await comboboxTester.open();
+
+    expect(comboboxTester.options()).toHaveLength(7);
+  });
 });