[Bug]: [Accessibility] [combobox] [docsite]: Page is scroll into top when combobox is focused with TAB key about fluentui

[smhigley]

@kolaps33 I can't repro this on the docs site on Chrome or Edge (both v126) on Windows, Firefox v127 on Windows, Edge v125 on Mac, or Chrome (canary) v128 on Mac. I'm trying all the following on the Combobox docs page:

• scrolling down partway through the page, clicking to set focus nav start point, then tabbing to comboboxes
• tabbing through all comboboxes, starting from the top of the page
• Doing both of the above, and also opening a combobox somewhere partway down the page after tabbing to it

Is there something you're doing to get this behavior that I've missed? Also, could you provide browser & version info?

[lgoeckener]

@smhigley Hi, I can reproduce it and figured out where the issue comes from but don't know how to fix it, yet.

See: https://codesandbox.io/p/sandbox/fluentui-issues-31814-4thsym

It seems to be part of the useActiveDescendant hook in the @fluentui/react-aria dep. More precisely it is due to this MR #31158.

The findScrollableParent method recursively searches for a parent element that is overflowing vertically and scrolls to the top of it. Unfortunately this parent element does not necessarily is in context within the combobox itself. For example it is a wrapper div that contains multiple forms or elements.

edit:
Actually, I guess #31415 should be the fix for this misbehavior. Can you give a rough estimation on when this might be released with an update of the react-components?

edit 2:
The current bugfix release (9.54.3) brings a new prop to the Combobox component that works around this issue. Not a real fix as it decreases UX but at least it is usable again using that property.
@kolaps33 Does that prop also work for your case?

[lgoeckener]

This actually also happens for the TagPicker when the inline prop is used. The "workaround" using disableAutoFocus doesn't help here.