[Bug]: Scroll jump when navigating nested tree using keyboard

[miroslavstastny]

Library

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

System Info

--

Are you reporting Accessibility issue?

None

Reproduction

https://stackblitz.com/edit/4tp1ua-c6neih?file=src%2Fexample.tsx

Bug Description

Actual Behavior

• Use nested tree with a lot of items
• Navigate the items using keyboard
• The scroll "randomly jumps" when navigating among the items
• When the focused item is out of view, it is scrolled into view. Sometimes, the focused tree item is scrolled to the center of the viewport. That is browser behavior and should not be a surprise for users.

The problem appears once you focus any tree item which has a subtree.

We are focusing the TreeItem itself, not the TreeItemLayout.
The TreeItem contains all its subtree.
At this moment the browser does its best to fit the focused item (whole subtree) into the view and that causes the jump

Expected Behavior

No perceived jumpiness during scroll.

Screen.Recording.2024-06-03.at.5.08.10.PM.mov

Logs

No response

Requested priority

Blocking

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

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