[Bug]: Autofocus does not work properly for dynamic elements and dialogs

[MarvinKlein1508]

Component

Other...

Package version

3.0.0-rc.28

@microsoft/fast-element version

2.9.1

Environment

System:
    OS: Windows 11 10.0.26200
    CPU: (28) x64 Intel(R) Core(TM) i7-14700K
    Memory: 6.30 GB / 31.78 GB
  Browsers:
    Edge: Chromium (149.0.4022.69)
    Firefox: 152.0.1 - C:\Program Files\Mozilla Firefox\firefox.exe
    Firefox Developer Edition: 153.0 - C:\Program Files\Firefox Developer Edition\firefox.exe

Current Behavior

When you add a new element to the DOM which has the attribute autofocus then this element won't be focused by default.

In addition if you have any focus element within dialogs then they won't be focused here as well.

@marchbox did some work in the autofocus area last week in #36296 so perhaps he can help out here.

This issue is related to: microsoft/fluentui-blazor#4699

Expected Behavior

I expect the new element to get focused automatically and the element in the dialog to get the focus.

Reproduction

https://github.com/MarvinKlein1508/wc-autofocus-issue

Steps to reproduce

1. Clone repository
2. npm start
3. Click first button
4. See that the fluent-text-input does not get focues by default
5. Close the dialog
6. Click the second button
7. The new added fluent-text-input won't be focused

Are you reporting an Accessibility issue?

no

Suggested severity

High - No workaround

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.