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

kolaps33 commented 1 month ago

Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Windows 10 10.0.22631
    CPU: (12) x64 Intel(R) Xeon(R) E-2176M  CPU @ 2.70GHz
    Memory: 11.55 GB / 31.74 GB
  Browsers:
    Edge: Chromium (126.0.2592.68)
    Internet Explorer: 11.0.22621.3527

Are you reporting Accessibility issue?

None

Reproduction

https://react.fluentui.dev/?path=/docs/components-combobox--default

Bug Description

Open docstie with combobox: https://react.fluentui.dev/?path=/docs/components-combobox--default
Navigate using TAB key to any combobox

Actual Behavior

when focus goes to the combobox then page is scroll into top in the fact focus is inside the cobobox but user cannot see it, because page has scrolled to the top It is not usable when I need use TAB key to navigate through the page.

Expected Behavior

page shouldn't scroll to the top it should stay scrolled where focus landed

Note: luckily this is not repro with the code sandbox: https://stackblitz.com/edit/nbrsaz?file=src%2Fexample.tsx

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] The provided reproduction is a minimal reproducible example of the bug.

smhigley commented 1 month ago

@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 commented 1 month ago

@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 https://github.com/microsoft/fluentui/pull/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 https://github.com/microsoft/fluentui/pull/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 commented 1 month ago

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

rosergeev commented 2 weeks ago

Hi there! I've experienced the same issue. Here it is my repro steps for 100% - https://codesandbox.io/p/devbox/comboboxfocusissue-w58zds?file=%2Fsrc%2FApp.tsx%3A14%2C10

There are 31 textbox, then last but one is combobox. When you go through controls with tab key it scrolls to the top of screen when it hits the combo. I found out the following - if you comment out in index.css style for html html { height: 100%; } then everything works as expected!

microsoft / fluentui