Tabster async autoroot initialization breaks certain Fluent scenarios
bsunderhus opened this issue · comments
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