Tabster async autoroot initialization breaks certain Fluent scenarios

[bsunderhus]

This happened during the Modalizer revamp: Modalizer revamp by mshoho · Pull Request #218 · microsoft/tabster (github.com)

 

Reported issue: [Bug]: dialog directly mounted with open=true could not get focus · Issue #26824 · microsoft/fluentui (github.com)

Repro (also in the bug): Sandbox - CodeSandbox (csb.app)

 

What seems to be happening is that since tabster@4.1.1 is that the autoroot creation is now async. This means that when a Fluent component that uses tabster is mounted, it generates errors because only the first usage of tabster initialized the autoroot. Since this is async, the React component can't actually use tabster on first render.

 

In the repro:

• The dialog is mounted
• tabster does not exist
• dialog initializes tabster
• dialog uses modalizer
• tabster error -> no autoroot created
• tabster creates autoroot
• modalizer is inactive because there was not root
• can't tab any element in the dialog
• use the console to call .focus() on an element
• now the modalizer is active

[angelo-mollame]

@bsunderhus can you please share where/how this issue was fixed? I can still repro the issue with "@fluentui/react-components": "9.49.1".

[bsunderhus]

We've updated latest tabster versions in Fluent v9 and the newest version should have this problem solved. Can you share a reproduction of the problem with "@fluentui/react-components": "9.49.1". @angelo-mollame ?

Here's a working example: https://stackblitz.com/edit/hirhwd?file=src%2Fexample.tsx

[angelo-mollame]

I created an issue and added repro steps here: microsoft/fluentui#31421