calcite-dialog: setting focusTrapEnabled by default isn't working

[AdelheidF]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

If I create a dialog with focusTrapEnabled by default it doesn't seem to work. If I then open a popover and click outside the popover it is no longer reacting.
If I set focusTrapEnabled on the dialog about 1 second after it was added to the DOM then it works fine.
Same if I edit the DOM by hand and add/re-add focusTrapEnabled on the dialog.

cc @driskull

Expected Behavior

focusTrapEnabled takes effect immediately when the dialog is opened.

Reproduction Sample

https://codepen.io/afreitag/pen/ByNLEMK

Reproduction Steps

Click on button, click on list, works fine.
Now click outside the popover once and come back to list, no longer focuses on the list.
Now enabled commented out code and do the same test. Now it works.

Reproduction Version

3.2.1

Relevant Info

No response

Regression?

probably

Priority impact

impact - p1 - need for current milestone

Impact

popover inside a dialog can get unresponsive

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/calcite-ui-icons
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Map Viewer

[geospatialem]

The above has a workaround, where when after the dialog is open the focus trap can be disabled.

Additional expertise should seek out if other components are effected by the above, adding a spike to the issue to reflect the research needed prior to a fix to determine effects across components.

[geospatialem]

The above impacts only dialog, and can be depicted via https://codepen.io/driskull/pen/emNgNeK