fix(react): backdrop for inline modal/popover overlay

ionic-team · Dec 20, 2021 · c1d4978 · c1d4978
1 parent 4715b83
commit c1d4978
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 25 deletions.
diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts
@@ -35,6 +35,9 @@ const createController = <Opts extends object, HTMLElm extends any>(tagName: str
     },
     async getTop(): Promise<HTMLElm | undefined> {
       return getOverlay(document, tagName) as any;
+    },
+    defineCustomElements() {
+      return registerOverlayComponents(tagName, customElement, childrenCustomElements);
     }
   };
 };
@@ -59,27 +62,33 @@ export const prepareOverlay = <T extends HTMLIonOverlayElement>(el: T) => {
   }
 };
 
-export const createOverlay = <T extends HTMLIonOverlayElement>(tagName: string, opts: object | undefined, customElement?: any, childrenCustomElements?: ChildCustomElementDefinition[]): Promise<T> => {
+const registerOverlayComponents = (tagName: string, customElement: any, childrenCustomElements?: ChildCustomElementDefinition[]): Promise<any> => {
   /* tslint:disable-next-line */
-  if (typeof window.customElements !== 'undefined') {
-    if (typeof (window as any) !== 'undefined' && window.customElements) {
-      if (!window.customElements.get(tagName)) {
-        window.customElements.define(tagName, customElement);
-      }
-      /**
-       * If the parent element has nested usage of custom elements,
-       * we need to manually define those custom elements.
-       */
-      if (childrenCustomElements) {
-        for (const customElementDefinition of childrenCustomElements) {
-          if (!window.customElements.get(customElementDefinition.tagName)) {
-            window.customElements.define(customElementDefinition.tagName, customElementDefinition.customElement);
-          }
+  if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined') {
+    const { customElements } = window;
+    if (!customElements.get(tagName)) {
+      customElements.define(tagName, customElement);
+    }
+    /**
+     * If the parent element has nested usage of custom elements,
+     * we need to manually define those custom elements.
+     */
+    if (childrenCustomElements) {
+      for (const customElementDefinition of childrenCustomElements) {
+        if (!customElements.get(customElementDefinition.tagName)) {
+          customElements.define(customElementDefinition.tagName, customElementDefinition.customElement);
         }
       }
     }
+    return customElements.whenDefined(tagName);
+  }
+  return Promise.resolve() as any;
+}
 
-    return window.customElements.whenDefined(tagName).then(() => {
+export const createOverlay = <T extends HTMLIonOverlayElement>(tagName: string, opts: object | undefined, customElement?: any, childrenCustomElements?: ChildCustomElementDefinition[]): Promise<T> => {
+  /* tslint:disable-next-line */
+  if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined') {
+    return registerOverlayComponents(tagName, customElement, childrenCustomElements).then(() => {
       const element = document.createElement(tagName) as HTMLIonOverlayElement;
       element.classList.add('overlay-hidden');
 

diff --git a/packages/react/src/components/IonModal.tsx b/packages/react/src/components/IonModal.tsx
@@ -1,9 +1,8 @@
-import { JSX } from '@ionic/core/components';
-import { IonModal as IonModalCmp } from '@ionic/core/components/ion-modal.js';
+import { JSX, modalController } from '@ionic/core/components';
 
 import { createInlineOverlayComponent } from './createInlineOverlayComponent'
 
 export const IonModal = /*@__PURE__*/ createInlineOverlayComponent<
   JSX.IonModal,
   HTMLIonModalElement
->('ion-modal', IonModalCmp);
+>('ion-modal', modalController);
diff --git a/packages/react/src/components/IonPopover.tsx b/packages/react/src/components/IonPopover.tsx
@@ -1,9 +1,8 @@
-import { JSX } from '@ionic/core/components';
-import { IonPopover as IonPopoverCmp } from '@ionic/core/components/ion-popover.js';
+import { JSX, popoverController } from '@ionic/core/components';
 
 import { createInlineOverlayComponent } from './createInlineOverlayComponent'
 
 export const IonPopover = /*@__PURE__*/ createInlineOverlayComponent<
   JSX.IonPopover,
   HTMLIonPopoverElement
->('ion-popover', IonPopoverCmp);
+>('ion-popover', popoverController);
diff --git a/packages/react/src/components/createInlineOverlayComponent.tsx b/packages/react/src/components/createInlineOverlayComponent.tsx
@@ -5,7 +5,6 @@ import {
   attachProps,
   camelToDashCase,
   dashToPascalCase,
-  defineCustomElement,
   isCoveredByReact,
   mergeRefs,
 } from './react-component-lib/utils';
@@ -26,9 +25,9 @@ interface IonicReactInternalProps<ElementType> extends React.HTMLAttributes<Elem
 
 export const createInlineOverlayComponent = <PropType, ElementType>(
   tagName: string,
-  customElement?: any
+  controller: { defineCustomElements: () => Promise<any> }
 ) => {
-  defineCustomElement(tagName, customElement);
+  controller.defineCustomElements();
 
   const displayName = dashToPascalCase(tagName);
   const ReactComponent = class extends React.Component<IonicReactInternalProps<PropType>, InlineOverlayState> {