Calcite-components: Bug: Modal loses buttons on re-render

[nwhittaker]

A common pattern in Ember is to dynamically add and remove templates as needed. Applying this pattern to the calcite-modal component exposes an issue where the slotted button elements visually disappear on subsequent re-renders.

Actual Behavior

| First render | Second render |
| - | - |
| | |

Expected Behavior

Slotted buttons continue to be visually present and clickable.

Reproduction Steps or Sample

<button {{action 'openModal'}}>Open modal</button>

{{#if isOpen}}
  <calcite-modal active>
    <h3 slot="header">Title of the modal</h3>
    <p slot="content">The actual content of the modal</p>
    <calcite-button slot="primary">Primary</calcite-button>
  </calcite-modal>
{{/if}}

1. Visit https://jsbin.com/xutonogoya/1/edit?html,js,output for working repro case.
2. Click the _Open modal_ button and notice the button at the bottom.
3. Close the modal and click the _Open modal_ button again to reopen it. Notice the button is gone.

Alternative repro

<calcite-modal>
  <h3 slot="header">Title of the modal</h3>
  <p slot="content">The actual content of the modal</p>
  <calcite-button slot="primary">Primary</calcite-button>
</calcite-modal>

<button {{action 'openModal'}}>Open modal</button>

{{#if isOpen}}
  <calcite-modal active>
    <h3 slot="header">Title of the modal</h3>
     <p slot="content">The actual content of the modal</p>
     <calcite-button slot="primary">Primary</calcite-button>
  </calcite-modal>
{{/if}}

1. Visit https://jsbin.com/jegebifuse/1/edit?html,js,output for working repro.
2. Click the _Open modal_ button and notice the slotted button is not shown.

Relevant Info

Observed in latest versions of Safari 14.1 and Chrome 90. Symptoms are similar to those observed in https://github.com/Esri/calcite-components/issues/1409. Possibly related to a similar underlying issue?

_Version_: @esri/[email protected]

[caripizza]

@nwhittaker thank you for this really well documented bug report.

[nwhittaker]

Thanks @caripizza. I added an alternative repro. case to the issue description. In summary, if another <calcite-modal> instance already exists in the DOM, the dynamically generated instance doesn't show the slotted buttons on its first render.

[Csmith246]

I've also noticed this behavior of the footer buttons disappearing. If you need another repro example, you can setup and run this project locally: https://github.com/Csmith246/calcite-4x-widget-sandbox

[jcfranco]

Installed.

@nwhittaker @Csmith246 Could you help verify this one? Thanks!

[nwhittaker]

Looks good to me in the jsbin -- thanks for swift fix!