Focus issue while calcite-popover is used from the calcite-dialog component.

[sid12777]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

Modelbuilder have a custom dialog html element which we were using to show tool dialog. With the rollout of new calcite-dialog component, I am trying to upgrade the component by using the calcite-dialog component instead of html dialog component.

Focus-issue-calcite-dialog.mp4

I am seeing this issue of focus being trapped in calcite-dialog when I am trying to open a calcite-popover from the calcite-dialog. The focus from calcite-dialog close button is not able to shift to popover close button. Might be due to multiple trappable components.

I also noticed that if a popover is open from the calcite-dialog, and when close button is clicked on popover, there is a console error related to the focus.

Here is the code pen of the above problem. https://codepen.io/mac_and_cheese/pen/WberzdQ?editors=1000

Machine details:
Windows 11,
Chrome version: Version 131.0.6778.108 (Official Build) (64-bit)
calcite-components: 2.14.0-next.20

Expected Behavior

There should be no errors in the console, and focus should transfer to the components.

Reproduction Sample

https://codepen.io/mac_and_cheese/pen/WberzdQ?editors=1000

Reproduction Steps

1. Open the console for the browser.
2. Click on the info icon and then click on the popover close button.
3. We can see the error in the console.

Reproduction Version

2.14.0-next.20

Relevant Info

Machine details:
Windows 11,
Chrome version: Version 131.0.6778.108 (Official Build) (64-bit)
calcite-components: 2.14.0-next.20

Regression?

No response

Priority impact

impact - p3 - not time sensitive

Impact

No response

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 AppStudio