Listbox doesn't scroll the container when an item is focused

[honzatmn]

🐛 Bug Report

When Listbox is wrapped in a container with overflow auto, it doesn't automatically scroll when items are focused.

🤔 Expected Behavior

• It should scroll the parent container when I move up and down by arrows, so the focused item is always visible.

😯 Current Behavior

• It doesn't scroll.
• It works on first focus. If the focused item is e.g. item "Eight", I click out of the box, scroll the box up, and hit Tab, it will scroll the item "Eight" to the view correctly.

🔦 Context

I discovered this when used in Popover if it helps somehow, but it seems it's general behavior.

💻 Code Sample

https://codesandbox.io/s/modest-haze-wqeoz

🌍 Your Environment

https://www.whatsmybrowser.org/b/T752W

🧢 Your Company/Team

Not working at Adobe.

[snowystinger]

If you can, leave the scrolling of the collection to the collection component. That way you'll get infinite scrolling and good performance.
Another note, if you put an element right next to your collection component ('Choose an option') the max-height: 100% will be off, because it won't subtract that element's height. Best to put the collection component in its own containing element.
Hopefully that helps, but let us know if you're still having issues

[honzatmn]

If you can, leave the scrolling of the collection to the collection component.

I am not sure it's doable in this case. The collection is wrapped inside of a popover div that has max-height set by useOverlayPosition. There could be other elements potentially (not just that list itself), and all should be scrolled within the popover. Is there any recommended workaround for this, please?

[snowystinger]

I think you should be able to do it like this? https://codesandbox.io/s/cocky-robinson-65hud?file=/src/index.js

[snowystinger]

Were you able to get it working with that suggestion?

[honzatmn]

@snowystinger Sorry for my delayed answer.

I think you should be able to do it like this? https://codesandbox.io/s/cocky-robinson-65hud?file=/src/index.js

This doesn't seem to work either (even on codesandbox) – or does it auto-scroll for you? 🤔

Even if it worked though – it still doesn't solve the issue, does it? There may be elements inside of a container that should be scrolled away (e.g. on the very top or bottom) and not be static/sticky like this.

[snowystinger]

Ah, just re-read your description, I missed the part about tabbing back into it. I've updated it so it works, just had to move the overflow auto to the ul
https://codesandbox.io/s/cocky-robinson-65hud?file=/src/index.js
I am noticing though that it's rendering all of them and not handling the infinite scrolling where it should only render some. I'll look at that a bit more today and see if I can't figure that part out, but hopefully this will get you past your issue

[snowystinger]

This discussion resolves this issue #2447 (reply in thread)
On a separate note, it's rendering all of them and not handling the infinite scrolling this is because a Virtualizer isn't being used/implemented, so behavior is expected.