Merge pull request #476 from Rahien/karel/fix-modal-v3

Add support for displaying multiple modals at the same time

Author: Windvis

addon/components/au-modal.gjs

@@ -85,7 +85,7 @@ export default class AuModal extends Component {
 
   <template>
     {{#if @modalOpen}}
-      {{#in-element this.destinationElement}}
+      {{#in-element this.destinationElement insertBefore=null}}
         <div class="au-c-modal-backdrop {{if @modalOpen 'is-visible'}}"></div>
         <div
           id="{{@id}}"

styles/components/_c-modal.scss

@@ -6,7 +6,11 @@
    ========================================================================== */
 
 $au-modal-z-index: 9999 !default;
-$au-modal-backdrop-z-index: 9998 !default;
+$au-modal-backdrop-z-index: $au-modal-z-index !default;
+
+@if $au-modal-z-index != $au-modal-backdrop-z-index {
+  @warn "DEPRECATED $au-modal-backdrop-z-index. This property has been deprecated and $au-modal-z-index and $au-modal-backdrop-z-index have different values. This will result in unexpected behavior when showing multiple modals.";
+}
 
 /* Component
   ========================================================================== */

tests/integration/components/au-modal-test.js

@@ -248,4 +248,19 @@ module('Integration | Component | au-modal', function (hooks) {
     await click(closeButton);
     assert.strictEqual(timesCalled, 1);
   });
+
+  test('it can render multiple modals at once', async function (assert) {
+    await render(hbs`
+      <AuModalContainer />
+      <AuModal @modalOpen={{true}}>
+        <div data-test-content-one>One!</div>
+      </AuModal>
+      <AuModal @modalOpen={{true}}>
+        <div data-test-content-two>Two!</div>
+      </AuModal>
+    `);
+
+    assert.dom('[data-test-content-one]').containsText('One!');
+    assert.dom('[data-test-content-two]').containsText('Two!');
+  });
 });