Listbox inside a combobox not scrolling on keyboard navigation

[paustint]

I have been unable to get the listbox within combobox to scroll when a user navigates with the keyboard.

I have tried adding various styles to specific elements, but when using the keyboard to navigate, the container never scrolls when the user focuses on elements that are not in the container.

I saw the issue @snowystinger was involved in that is similar #1504 - but thought a discussion might be more appropriate to start with unless it is determined to be a bug.

Here is a code sandbox reproducing the issue
https://codesandbox.io/s/empty-frost-sn0yr

Here is the design framework I am using with this example:
https://www.lightningdesignsystem.com/components/combobox/#Displaying-options-based-on-user-input

[LFDanLu]

Strange, focused elements should've been brought into view via

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

Lines 355 to 364 in faeb53e

	// If not virtualized, scroll the focused element into view when the focusedKey changes.
	// When virtualized, Virtualizer handles this internally.
	useEffect(() => {
	if (!isVirtualized && manager.focusedKey && scrollRef?.current) {
	let element = scrollRef.current.querySelector(`[data-key="${manager.focusedKey}"]`) as HTMLElement;
	if (element) {
	scrollIntoView(scrollRef.current, element);
	}
	}
	}, [isVirtualized, scrollRef, manager.focusedKey]);

, I'll dive into your implementation in a bit

[LFDanLu]

Did some digging, it is because your ul in the ListBox is not the scrollable element, rather it is the wrapping div that is scrollable. The scrollRef in the above useSelectableCollection code needs to point to the scrollable element in order to properly scroll the items into view. You have a couple of options to fix this:

1. Make the ul have a set max height + "overflow: auto". This max height would need to be the same as the wrapping div's max height. Inheriting/limiting the ul's height to the parent div's height is also an option instead of setting an explict max height (can be done via "display: flex" on the div and flex-grow: 1 on the ul?)
2. Move the wrapping div into the ListBox component and attaching the listbox ref + props to the div instead

[paustint]

Thank you so much for you help. I could have sworn that I tried that before posting here, but I guess not since I got it working very easily. 🤦