[Bug]: Using Toolbar is making it not possible to use tab key in monaco editor

[dickwyn]

Library

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

System Info

System:
    OS: Windows 10 10.0.22631
    CPU: (16) x64 Intel(R) Xeon(R) Platinum 8370C CPU @ 2.80GHz
    Memory: 38.28 GB / 63.95 GB
  Browsers:
    Edge: Chromium (124.0.2478.97)
    Internet Explorer: 11.0.22621.3527

Are you reporting Accessibility issue?

yes

Reproduction

https://codesandbox.io/p/sandbox/toolbar-monaco-editor-y9drxt?file=%2Fsrc%2Fexample.tsx

Bug Description

Actual Behavior

in the monaco editor, when i click tab, it shifts the focus to other elements. note: shift + tab works. when i remove the <Toolbar> tabbing in the monaco editor works correctly

Expected Behavior

i'm able to use the tab key to add spaces in the monaco editor

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.

[marcgabe15]

I had the same issue. Looks like it was tabster. I followed this link microsoft/tabster#384 to check
document.addEventListener('tabster:movefocus', e => ...)

Then, based on this other bug microsoft/tabster#316 adding data-tabster='{"uncontrolled": {}}' to Monaco Editor did the trick

Example:
<Editor data-tabster='{"uncontrolled": {}}' className={styles.monacoContainer} defaultValue="test123" />

It looks like you can also use useUncontrolledFocus as well https://react.fluentui.dev/?path=/docs/utilities-focus-management-useuncontrolledfocus--default which is just the wrapper to data-tabster='{"uncontrolled": {}}

[dickwyn]

thanks @marcgabe15 for the suggestion! that workaround did indeed work for me!

[bk201-]

@marcgabe15 Unfortunately this trick doesn't work for me.
I use @fluentui/react-components version 9.56.2. Adding this data-attribute does nothing. I have on my page many components: Toaster, Toolbar, Dialog, etc

UPD: I did small investigation. This trick works only after monaco editor there are any element what can take a focus. If editor is a last element in the focus line, tabster can't find next element to set focus and decides that keypress was outside of a DOM