[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

[adamma1024]

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.

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

• 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.

[miroslavstastny]

Thanks @adamma1024 for reporting.
@bsunderhus, @mshoho - also see related #27468

[sumitshinde-84]

I would like to work on this issue, can you please assign it to me?

[adamma1024]

Hi all, thanks for your investigation and help. My last question, which version would contain the PR #27540 ? I need to notify my team to upgrade to it.