topic Re: Calcite-dialog closes when closing other floating elements inside (2.11.1) in Calcite Design System Questions

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

FC_Basson — Wed, 21 Aug 2024 06:23:18 GMT

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?

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

MattDriscoll — Wed, 21 Aug 2024 15:47:58 GMT

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.

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

MattDriscoll — Wed, 21 Aug 2024 15:54:24 GMT

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

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

FC_Basson — Wed, 21 Aug 2024 16:03:01 GMT

Thanks Matt.