Scroll issue when using keyboard in a fix height list

[bri-fox]

Provide a general summary of the issue here

Using GridList with a max-height, when using a keyboard to drag and drop, tabbing to a drop indicator that is out of view does not scroll the Gridlist.

🤔 Expected Behavior?

The Gridlist should scroll into view the drop indicator.

😯 Current Behavior

The Gridlist does not scroll into view the drop indicator.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

Give a gridlist a max-height

Version

"react-aria-components": "^1.1.1"

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Windows

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

thanks for reporting, i see this as well. easy to reproduce in the example https://react-spectrum.adobe.com/react-aria/GridList.html#reorderable

[rothsandro]

The useDroppableItem hook calls focus() on the drop indicator ref:

react-spectrum/packages/react-aria/src/dnd/useDroppableItem.ts

Lines 84 to 88 in cce1ec9

	useEffect(() => {
	if (dragSession && isDropTarget && ref.current) {
	ref.current.focus();
	}
	}, [isDropTarget, dragSession, ref]);

This works for the ListBox where the drop indicator is regular, visible element:

react-spectrum/packages/react-aria-components/src/ListBox.tsx

Lines 705 to 711 in cce1ec9

	<dom.div
	{...dropIndicatorProps}
	{...renderProps}
	role="option"
	ref={ref as RefObject<HTMLDivElement | null>}
	data-drop-target={isDropTarget || undefined}
	/>

For the GridList, the drop indicator is a visually hidden element, that's why scrolling it into viewport on focus doesn't work:

react-spectrum/packages/react-aria-components/src/GridList.tsx

Lines 636 to 647 in cce1ec9

	{dropIndicator && !dropIndicator.isHidden && (
	<div role="row" style={{position: 'absolute'}}>
	<div role="gridcell">
	<div
	role="button"
	{...visuallyHiddenProps}
	{...dropIndicator?.dropIndicatorProps}
	ref={dropIndicatorRef}
	/>
	</div>
	</div>
	)}

Adding position: relative on the drop indicator seems to solve the issue.

[mvanhorn]

Implemented in #10437.