[Bug]: Focus on TreeItemLayout not shown when element.focus()

[ruthshemla]

Library

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

System Info

-

Are you reporting Accessibility issue?

no

Reproduction

I would like to get the border around tree item on first click on tree item but currently I get the border only after keyboard navigation (up down left right)

Bug Description

Actual Behavior

using FlatTree with Virtualization running requestAnimationFrame(() => { const element = headlessTree.getElementFromItem(item); if (element) { element.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); element.focus(); } });

Expected Behavior

I expect the treeLayout to have border to indicate the focus on the element, but not shown, only when switching to another page, and back to that page, then I see the border on the TreeItemLayout I expect.

Logs

No response

Requested priority

High

Products/sites affected

ADX

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.

[bsunderhus]

Just for reference, in this example here: https://stackblitz.com/edit/yfssek?file=src%2Fexample.tsx I can see that the focus outline does appear on elements as expected in the Tree, even with virtualization scenario.

Keyboard heuristic

The problem you're seeing is probably related to the heuristic of deciding if we should or not show the focus indicator. In this minimal example you can see the same case: https://stackblitz.com/edit/e9my7x?file=src%2Fexample.tsx

If you click with your mouse you'll see no focus indication, but if you press enter with your keyboard, then the focus indicator will appear.

Our internals (keyborg) decide if you're in keyboard navigation mode, and if so, we show the focus indicator only for keyboard users. correct me if I'm wrong @ling1726

[bsunderhus]

For your case @ruthshemla, the best solution would be to use a separate logic to show border on selected items. Something similar to this: https://stackblitz.com/edit/ipwou1?file=src%2Fexample.tsx