Collections are not scrolling if scroll on body in the Chrome browser

Provide a general summary of the issue here

After changes in #8715, keyboard navigation does not scroll collection's items into viewport if scroll on the body in Chrome browser.

🤔 Expected Behavior?

Collection's items scroll into viewport.

😯 Current Behavior

subj

💁 Possible Solution

react-spectrum/packages/@react-aria/utils/src/scrollIntoView.ts

Line 152 in 76e8dd1

let scrollParents = getScrollParents(targetElement);

let scrollParents = getScrollParents(targetElement);
if (!isScrollPrevented) {
    scrollParent.push(root);
}

🔦 Context

No response

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/xenodochial-dream-kdff5w

Screen.Recording.2025-10-06.at.17.23.22.mov

Version

react-aria-components@1.13.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macos

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Thanks for catching this, reproduced locally. I think your proposed fix makes sense since we were previously relying on the assumption that that portion of the scroll code would only fire if scrolling was being prevented, would you like to make a PR for it?

@LFDanLu

@LFDanLu Hi, it's again does not work on react-aria-components v.1.16.0

@ValeraS

@ValeraS thanks for catching this, looks like it broke as a part of #9146. We actually don't include the root as a part of the scrollParents anymore due to the change in

react-spectrum/packages/@react-aria/utils/src/getScrollParents.ts

Lines 19 to 24 in 4b48a50

    
           do { 
        
             if (isScrollable(node, checkForOverflow)) { 
        
               parentElements.push(node); 
        
             } 
        
             node = node.parentElement as Element; 
        
           } while (node && node !== root);

, so that will need to be updated to bring that back.

However, doing that seems to be insufficient. It now seems to attempt to scroll the table body itself as you get partially down the table and triggers

react-spectrum/packages/@react-aria/utils/src/scrollIntoView.ts

Lines 159 to 164 in 4b48a50

    
           // Account for sub pixel differences from rounding 
        
           if ((Math.abs(originalLeft - newLeft) > 1) || (Math.abs(originalTop - newTop) > 1)) { 
        
             scrollParents = containingElement ? getScrollParents(containingElement, true) : []; 
        
             for (let scrollParent of scrollParents) { 
        
               scrollIntoView(scrollParent as HTMLElement, containingElement as HTMLElement, {block: 'center', inline: 'center'}); 
        
             }

even though the item you are keyboard navigating to is already in view. I think

react-spectrum/packages/@react-aria/utils/src/scrollIntoView.ts

Line 76 in 4b48a50

    
           let scrollBarHeight = scrollView.offsetHeight - scrollView.clientHeight - scrollBarOffsetY;

needs to return 0 if the scrollView is the root since we already use clientHeight here:

react-spectrum/packages/@react-aria/utils/src/scrollIntoView.ts

Line 49 in 4b48a50

let viewBottom = scrollView === root ? scrollView.clientHeight : view.bottom;

which should exclude the horizontal scrollbar. That seems to improve behavior but the scrolling isn't quite working, it scrolls to the proper position but then undos its progress with another scrollIntoView call

I've opened a PR for this #9780. Still needs to go through some through testing/logic check, feel free to take a look if you'd like

This got fixed by #9784 as a side effect, but #9780 has some extra fixes with the scroll into view calculations

Navigation Menu

Repository navigation

Collections are not scrolling if scroll on body in the Chrome browser #8977

Provide a general summary of the issue here

🤔 Expected Behavior?

😯 Current Behavior

💁 Possible Solution

🔦 Context

🖥️ Steps to Reproduce

Version

What browsers are you seeing the problem on?

If other, please specify.

What operating system are you using?

🧢 Your Company/Team

🕷 Tracking Issue

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	do {
	if (isScrollable(node, checkForOverflow)) {
	parentElements.push(node);
	}
	node = node.parentElement as Element;
	} while (node && node !== root);

	// Account for sub pixel differences from rounding
	if ((Math.abs(originalLeft - newLeft) > 1) \|\| (Math.abs(originalTop - newTop) > 1)) {
	scrollParents = containingElement ? getScrollParents(containingElement, true) : [];
	for (let scrollParent of scrollParents) {
	scrollIntoView(scrollParent as HTMLElement, containingElement as HTMLElement, {block: 'center', inline: 'center'});
	}

Collections are not scrolling if scroll on body in the Chrome browser #8977

Description

Provide a general summary of the issue here

🤔 Expected Behavior?

😯 Current Behavior

💁 Possible Solution

🔦 Context

🖥️ Steps to Reproduce

Version

What browsers are you seeing the problem on?

If other, please specify.

What operating system are you using?

🧢 Your Company/Team

🕷 Tracking Issue

Activity

LFDanLu commented on Oct 6, 2025

ValeraS commented on Mar 11, 2026

LFDanLu commented on Mar 11, 2026

LFDanLu commented on Mar 11, 2026

LFDanLu commented on Apr 7, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions