Calcite-dialog closes when closing other floating elements inside (2.11.1)

[FC_Basson]

With the new calcite-dialog component, when closing other "closable" elements contained within the dialog, the dialog also closes.  The happens with panels (inside a shell panel) and other dialogs.

Also, placing a calcite-shell component within the dialog, you need to resize it manually so that it does not cover the dialog header and footer components.

Here is a Codepen to demo the issues: https://codepen.io/fcbasson/pen/YzoazZE

This did not happen before the 2.11.x release.

It seems that the close button for all closable elements is a calcite-action component with a data-test="close" attribute, which is also now true for the calcite-dialog component, but it was not for the deprecated calcite-modal component.  So if you click the close button with the data-test="close" attribute inside a dialog, the event bubbles up and also closes the dialog.

Are there any other components to achieve the desired functionality?

[MattDriscoll]

Hi @FC_Basson thanks for reporting these issues!

> With the new calcite-dialog component, when closing other "closable" elements contained within the dialog, the dialog also closes.  The happens with panels (inside a shell panel) and other dialogs.

I'll create an issue for this one.

> Also, placing a calcite-shell component within the dialog, you need to resize it manually so that it does not cover the dialog header and footer components.

We have an issue for this one already. https://github.com/Esri/calcite-design-system/issues/10095

> Are there any other components to achieve the desired functionality?

No, but you can continue using the modal component until these bugs are fixed.

[FC_Basson]

Thanks Matt.

[MattDriscoll · Accepted solution]

Here's the issue: https://github.com/Esri/calcite-design-system/issues/10129