Open kolaps33 opened 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:
Is there something you're doing to get this behavior that I've missed? Also, could you provide browser & version info?
@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?
This actually also happens for the TagPicker when the inline prop is used. The "workaround" using disableAutoFocus doesn't help here.
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!
Library
React Components / v9 (@fluentui/react-components)
System Info
Are you reporting Accessibility issue?
None
Reproduction
https://react.fluentui.dev/?path=/docs/components-combobox--default
Bug Description
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