[Bug]: Dialog will blur incorrectly with React 18.2.0 and tabster 4.1.1, please upgrade tabster to v4.2.0+ to solve it #27487
Description
Library
React Components / v9 (@fluentui/react-components)
System Info
My dependencies in codeSandbox
{
"dependencies": {
"@fluentui/react-components": "9.18.3",
"react": "18.2.0",
"react-dom": "18.2.0",
"tabster": "4.1.1"
}
}Are you reporting Accessibility issue?
None
Reproduction
https://codesandbox.io/s/competent-merkle-gh75wv?file=/example.tsx
Bug Description
Actual Behavior
Expected Behavior
FYI
This issue is triggered by React@18 and tabster@4.1.1 together. It will disappear in React@17 or tabster@4.2.0+. The basic reason is tabster@4.1.1 use a setTimeout to initialize itself. It's not safe since components will visit tabster's properties somehow. But it's still in initialization state sometimes which will block react components (like FluentUI v9's Dialog) renderring correctly. Meanwhile, React@18 will augment this impact with a new sync React.render API.
So, from my perspective, it's better to upgrade tabster to 4.2.0+ in @fluentui/react-tabster package to solve it.
Logs
tabster invokes autoRootCreate incorrectly which will be triggered by React.flushSyncCallbacks (v18)
RootAPI._autoRootCreate (tabster.esm.js:1666)
getTabsterContext (tabster.esm.js:1860)
_acceptElement (tabster.esm.js:4220)
(anonymous) (tabster.esm.js:4114)
_findElements (tabster.esm.js:4164)
findElement (tabster.esm.js:4070)
findFirst (tabster.esm.js:4036)
(anonymous) (useFocusFinders.js:20)
(anonymous) (useFocusFirstElement.js:22)
commitHookEffectListMount (react-dom.development.js:23150)
commitPassiveMountOnFiber (react-dom.development.js:24931)
commitPassiveMountEffects_complete (react-dom.development.js:24891)
commitPassiveMountEffects_begin (react-dom.development.js:24878)
commitPassiveMountEffects (react-dom.development.js:24866)
flushPassiveEffectsImpl (react-dom.development.js:27039)
flushPassiveEffects (react-dom.development.js:26984)
performSyncWorkOnRoot (react-dom.development.js:26076)
flushSyncCallbacks (react-dom.development.js:12042)
(anonymous) (react-dom.development.js:25651)Requested priority
Normal
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.