Library

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

System Info

9.53.0

Are you reporting Accessibility issue?

yes

Reproduction

https://stackblitz.com/edit/9asbui?file=src%2Fexample.tsx,src%2FApp.tsx

Bug Description

Actual Behavior

The example contains a FlatTree, and on initial render it has empty children.
Tab on the button, press Enter key on the button, and the tree become visible.
Notice that Tabbing again doesn't focus on the tree.
Click on a TreeItem and use arrow up/down doesn't focus on the next item.

Expected Behavior

The navigation should work even if the tree is rendered initially with empty items.

This is discovered when building a virtualized tree. On initial render, 0 items are rendered in the virtualized tree because it needs to measure the size of the container.

Although this can be easily fixed by checking items.length, it would be nice to have this fixed in the tree so this type of problem doesn't happen no matter how user code is.

Logs

No response

Requested priority

High

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.