ComboBox list items not scrolling

[upender7270]

Provide a general summary of the issue here

I am integrating comboBox with my React app,
React - v18
Node - v20.7.0
OS - Ubuntu 22.04.4 LTS

"@adobe/react-spectrum": "^3.34.1",
"@react-spectrum/combobox": "^3.12.3",
"@react-spectrum/provider": "^3.9.5",

Peek.2024-04-20.15-07.mp4

🤔 Expected Behavior?

Should be able to scroll the items in the list box

😯 Current Behavior

Unable to scroll items in list box

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

1. Clone the repo - https://github.com/upender7270/react-combobox
2. yarn
3. yarn storybook
4. Open dynamic or static story of the combobox

Version

3.34.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Ubuntu

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[RajaTheKing826]

Yah yah I've also faced this issue many times.
Someone please look into this.

[snowystinger]

Possibly related scrollIntoViewport: improve scrolling behavior for elements with multiple scrollable parents

[reidbarber]

@snowystinger just tested with the nightly and I still saw this issue, so seems unrelated.

[sookmax]

I was also looking into this issue at the moment, and realized PopoverWrapper was being rendered too many times (this can be verified with React Developer Tools). And this infinite rendering of <PopoverWrapper> seems to be the reason why we're unable to scroll.

It looks like the root cause of this chain rendering is the invocation of updatePosition() inside the onResize() callback here:

react-spectrum/packages/@react-aria/overlays/src/useOverlayPosition.ts

Lines 195 to 204 in 72775d2

	let onResize = () => {
	isResizing.current = true;
	clearTimeout(timeout);
	timeout = setTimeout(() => {
	isResizing.current = false;
	}, 500);
	updatePosition();
	};

If the above updatePosition() is commented out, you'll see the working scroll:

Screen.Recording.2024-04-23.at.12.32.45.AM.mov

Update

Might be related to #5653 (comment) in terms of the change in behavior of resize event of VisualViewport.

[youssrikrap-cpi]

I'm experiencing the same issue. When the list is long enough and a scrollbar is rendered, the resize event from VisualViewport is triggered very often causing updatePosition to be called very often as well. This in turn causes the list to be unscrollable. It does not seem to be related to scrolling itself, since the resize event is triggering right after opening the ComboBox (see my second recording).

So far, I've only seen this happen when shouldFlip is set to false and isNonModal is set to true in ComboBox (as @sookmax already brought up in another issue). Setting shouldFlip to true (default behavior) or isNonModal to false doesn't seem to result in the repeated resize events.

Setting a fixed max-height on ListBox seems to fix the repeated resize events as well, but that causes the list to overflow the popover and trying to circumvent this through overflow-y either causes double scrollbars or parts of ListBox being hidden.

This recording shows scroll state resetting:

Screen.Recording.2024-04-25.at.11.18.45.mov

And this recording shows a console.log whenever resize is triggered on visualViewport.

Screen.Recording.2024-04-25.at.11.24.15.mov

[dsmmcken]

If it helps, I've noticed that rolling back one version to 3.33.1 fixes it, so it must have been introduced by a commit between that and 3.34.0.

[dsmmcken]

Another thing I noticed was it only happens if the parent doesn't contain enough space to fit the list, so for example:

Works:

<View height="4000px"> // height bigger than list
  <ComboBox
    label="test"
    items={Array.from({ length: 200 }, (_, index) => ({
      name: `Item ${index}`,
      key: index,
    }))}
  >
    {(item) => <Item>{item.name}</Item>}
  </ComboBox>
</View>

Doesn't work:

<View height="1000px"> // height smaller than list
  <ComboBox
    label="test"
    items={Array.from({ length: 200 }, (_, index) => ({
      name: `Item ${index}`,
      key: index,
    }))}
  >
    {(item) => <Item>{item.name}</Item>}
  </ComboBox>
</View>

[snowystinger]

Looks like we broke this in #5808