fix bug chrome & aumodal (#358)

app/components/contact-details.hbs

@@ -103,7 +103,7 @@
 
   </div>
 
-  <AuModal
+  <CustomModal
     @modalOpen={{this.editingContact}}
     @closeModal={{this.cancel}}
     @size="large"
@@ -164,5 +164,5 @@
         Annuleer
       </AuButton>
     </:footer>
-  </AuModal>
+  </CustomModal>
 {{/if}}

app/components/custom-modal.hbs

@@ -0,0 +1,69 @@
+{{#if @modalOpen}}
+  {{#in-element this.destinationElement}}
+    <div
+      {{on "click" this.closeModal}}
+      class="au-c-modal-backdrop {{if @modalOpen 'is-visible'}}"
+      role="button"
+    ></div>
+    <div
+      id="{{@id}}"
+      class={{concat
+        "au-c-modal "
+        this.size
+        this.padding
+        (if @modalOpen " is-visible")
+      }}
+      role="dialog"
+      aria-describedby={{concat "au-c-modal-title-" @id}}
+      tabindex="-1"
+      {{did-insert (fn this.setInert false)}}
+      {{focus-trap
+        isActive=@modalOpen
+        focusTrapOptions=(hash
+          onDeactivate=this.closeModal
+          initialFocus=".au-c-modal__title"
+          allowOutsideClick=true
+        )
+      }}
+      data-test-modal
+      ...attributes
+    >
+      <div class="au-c-modal__header" data-test-modal-header>
+        <h1
+          id="au-c-modal-title-{{@id}}"
+          class="au-c-modal__title"
+          tabindex="-1"
+          data-test-modal-title
+        >
+          {{#if (has-block "title")}}
+            {{yield to="title"}}
+          {{else}}
+            {{this.title}}
+          {{/if}}
+        </h1>
+        <button
+          class="au-c-modal__close"
+          type="button"
+          data-test-modal-close
+          {{on "click" this.closeModal}}
+        >
+          <AuIcon @icon="cross" @size="large" />
+          <span class="au-u-hidden-visually">Venster sluiten</span>
+        </button>
+      </div>
+
+      {{#if (has-block "body")}}
+        <div class="au-c-modal__body" data-test-modal-body>
+          {{yield to="body"}}
+        </div>
+      {{/if}}
+
+      {{#if (has-block "footer")}}
+        <div class="au-c-modal__footer" data-test-modal-footer>
+          {{yield to="footer"}}
+        </div>
+      {{/if}}
+
+    </div>
+  {{/in-element}}
+{{/if}}

app/components/custom-modal.js

@@ -0,0 +1,51 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+const LANDMARKS = ['aside', 'footer', 'form', 'header', 'main', 'nav'];
+
+/**
+ * TODO workaround for Issue https://github.com/appuniversum/ember-appuniversum/issues/273
+ * once fixed in appuniversum, we must drop this component & use the standard one again
+ */
+export default class CustomModal extends Component {
+  get destinationElement() {
+    return document.getElementById('ember-appuniversum-wormhole');
+  }
+
+  get size() {
+    if (this.args.size === 'fullscreen') return 'au-c-modal--fullscreen';
+    if (this.args.size === 'large') return 'au-c-modal--large';
+    else return '';
+  }
+
+  get padding() {
+    if (this.args.padding === 'none') return ' au-c-modal--flush';
+    else return '';
+  }
+
+  get title() {
+    if (this.args.title) {
+      return this.args.title;
+    } else {
+      return undefined;
+    }
+  }
+
+  @action
+  setInert(toggle) {
+    let landmarkElements = document.querySelectorAll(LANDMARKS);
+
+    this.destinationElement.inert = toggle;
+
+    landmarkElements.forEach(function (landmarkElement) {
+      if (landmarkElement.parentElement === document.body) {
+        landmarkElement.inert = !toggle;
+      }
+    });
+  }
+
+  @action
+  closeModal() {
+    this.setInert(true);
+    this.args.closeModal?.();
+  }
+}