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 [email protected] together. It will disappear in React@17 or [email protected]+. The basic reason is [email protected] 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.
Related PR: fix(Tabster): Initializing Tabster-related everything for the DOM elements mounted before Tabster creation. #251
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
Library
React Components / v9 (@fluentui/react-components)
System Info
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@18and[email protected]together. It will disappear inReact@17or[email protected]+. The basic reason is[email protected]use asetTimeoutto 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
tabsterto 4.2.0+ in@fluentui/react-tabsterpackage to solve it.Related PR: fix(Tabster): Initializing Tabster-related everything for the DOM elements mounted before Tabster creation. #251
Logs
Requested priority
Normal
Products/sites affected
No response
Are you willing to submit a PR to fix?
no
Validations