Library

Fluent UI React v8 (@fluentui/react)

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 Intel(R) Core(TM) i7-10610U CPU @ 1.80GHz
    Memory: 3.36 GB / 15.73 GB
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (103.0.1264.37)
    Internet Explorer: 11.0.22000.120

Are you reporting Accessibility issue?

no

Reproduction

https://codepen.io/robarnea/pen/WNzNVdK?editors=1111

Bug Description

Actual Behavior

In a scenario there are FocusZone components in the DOM, and user press tab (even outside react components) it triggers FocusZone._onKeyDownCapture code.
After drilling down in the fluent code I notice there is global listening to keydown with tab events:
https://github.com/microsoft/fluent-ui-react/blob/master/packages/react-bindings/src/FocusZone/FocusZone.tsx

AFAIU this function updates all tab indexes of the FocusZone components exists.
You can observe the issue with the reproduction example, if you record a profile and press tab inside the textbox (not a react component) there is a call to the function FocusZone._onKeyDownCapture.

In this example the perf issue is neglible, but it can cause a significant perf issue. For example open word online workbook and profile pressing a tab in the page editor. you can see it adds 15-30 ms synchronically for each tab event handler.

Expected Behavior

I suggest the following solutions:

1. Constrain its behavior to only trigger on events where Fluent components are involved
2. Call this function in the next frame (requestAnimationFrame with Timeout = 0)

Logs

No response

Requested priority

High

Products/sites affected

Office online

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.