fix(core/modal): close only target modal

packages/core/src/components/modal-container/modal-container.tsx

@@ -19,6 +19,10 @@ import { TypedEvent } from '../utils/typed-event';
 export class ModalContainer {
   @Element() hostElement: HTMLIxModalContainerElement;
 
+  get modalStack() {
+    return this.hostElement.querySelector(':scope > div.modal-stack');
+  }
+
   /**
    * Display modal dialog
    *
@@ -41,15 +45,18 @@ export class ModalContainer {
     } else {
       modal.appendChild(content);
     }
-
-    this.hostElement.appendChild(modal);
+    this.modalStack.appendChild(modal);
 
     modal.addEventListener('closed', (event: CustomEvent<T>) => {
-      this.hostElement.removeChild(modal);
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      this.modalStack.removeChild(modal);
       onClose.emit(event.detail);
     });
     modal.addEventListener('dismissed', (event: CustomEvent<T>) => {
-      this.hostElement.removeChild(modal);
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      this.modalStack.removeChild(modal);
       onDismiss.emit(event.detail);
     });
 
@@ -61,6 +68,10 @@ export class ModalContainer {
   }
 
   render() {
-    return <Host></Host>;
+    return (
+      <Host>
+        <div class="modal-stack"></div>
+      </Host>
+    );
   }
 }

packages/core/src/components/modal-container/test/modal-container.spec.tsx

@@ -16,6 +16,8 @@ describe('ix-modal-container', () => {
       components: [ModalContainer],
       html: '<ix-modal-container></ix-modal-container>',
     });
-    expect(page.root).toEqualHtml('<ix-modal-container></ix-modal-container>');
+    expect(page.root).toEqualHtml(
+      '<ix-modal-container><div class="modal-stack"></div></ix-modal-container>'
+    );
   });
 });

packages/core/src/components/modal/modal.tsx

@@ -21,6 +21,12 @@ import anime from 'animejs';
 import Animation from '../utils/animation';
 import { NotificationColor } from '../utils/notification-color';
 
+let modalInstanceId = 0;
+
+function getNextModalInstanceId() {
+  return `ix-modal-instance-${++modalInstanceId}`;
+}
+
 @Component({
   tag: 'ix-modal',
   styleUrl: 'modal.scss',
@@ -120,6 +126,7 @@ export class Modal {
    */
   @Event() dismissed: EventEmitter;
 
+  private modalId = getNextModalInstanceId();
   private readonly onKeydown = this.handleKeydown.bind(this);
 
   get modal() {
@@ -237,7 +244,7 @@ export class Modal {
 
   render() {
     return (
-      <Host>
+      <Host id={this.modalId}>
         <div
           class={{
             animation: this.animation,

packages/core/src/components/modal/test/__snapshots__/modal.spec.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`modal renders 1`] = `
-<ix-modal>
+<ix-modal id="ix-modal-instance-1">
   <!---->
   <div aria-labelledby="modal-title" class="animation backdrop modal scrollable">
     <div class="modal-dialog modal-sm">

packages/react/src/modal/index.ts

@@ -24,6 +24,7 @@ export async function showModal<TReason = any>(
   }
 
   const container = document.createElement('DIV');
+  container.style.display = 'contents';
   const root = ReactDOMClient.createRoot(container);
   root.render(config.content);
 

packages/react/src/modal/modal.tsx

@@ -26,7 +26,7 @@ export const Modal = React.forwardRef<
     children: React.ReactNode;
   }
 >((props, ref: React.ForwardedRef<ModalRef>) => {
-  const wrapperRef = useRef<HTMLDivElement>(null);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
 
   useImperativeHandle(ref, () => {
     let htmlElement: HTMLIxModalElement | null = null;
@@ -54,5 +54,13 @@ export const Modal = React.forwardRef<
     };
   });
 
-  return <div ref={wrapperRef}>{props.children}</div>;
+  return (
+    <>
+      {React.Children.map(props.children, (child) =>
+        React.cloneElement(child as any, {
+          ref: (ref: HTMLDivElement) => (wrapperRef.current = ref),
+        })
+      )}
+    </>
+  );
 });