From 21dc893f90a56d14d69330367daae6788e32652e Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 21 Sep 2022 10:30:32 -0500
Subject: [PATCH] fix(react): overlays now define internal ionic components
 (#25967)

resolves #25962
---
 packages/react/src/components/IonAlert.tsx                 | 4 ++--
 packages/react/src/components/IonLoading.tsx               | 4 ++--
 packages/react/src/components/IonPicker.tsx                | 4 ++--
 packages/react/src/components/IonToast.tsx                 | 4 ++--
 .../react/src/components/createControllerComponent.tsx     | 7 ++++---
 5 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/react/src/components/IonAlert.tsx b/packages/react/src/components/IonAlert.tsx
index f7b5acd30c..4f9ada9995 100644
--- a/packages/react/src/components/IonAlert.tsx
+++ b/packages/react/src/components/IonAlert.tsx
@@ -1,10 +1,10 @@
 import { AlertOptions, alertController } from '@ionic/core/components';
-import { IonAlert as IonAlertCmp } from '@ionic/core/components/ion-alert.js';
+import { defineCustomElement } from '@ionic/core/components/ion-alert.js';
 
 import { createControllerComponent } from './createControllerComponent';
 
 export const IonAlert = /*@__PURE__*/ createControllerComponent<AlertOptions, HTMLIonAlertElement>(
   'ion-alert',
   alertController,
-  IonAlertCmp
+  defineCustomElement
 );
diff --git a/packages/react/src/components/IonLoading.tsx b/packages/react/src/components/IonLoading.tsx
index 0d4ab8150a..11528b7346 100644
--- a/packages/react/src/components/IonLoading.tsx
+++ b/packages/react/src/components/IonLoading.tsx
@@ -1,9 +1,9 @@
 import { LoadingOptions, loadingController } from '@ionic/core/components';
-import { IonLoading as IonLoadingCmp } from '@ionic/core/components/ion-loading.js';
+import { defineCustomElement } from '@ionic/core/components/ion-loading.js';
 
 import { createControllerComponent } from './createControllerComponent';
 
 export const IonLoading = /*@__PURE__*/ createControllerComponent<
   LoadingOptions,
   HTMLIonLoadingElement
->('ion-loading', loadingController, IonLoadingCmp);
+>('ion-loading', loadingController, defineCustomElement);
diff --git a/packages/react/src/components/IonPicker.tsx b/packages/react/src/components/IonPicker.tsx
index d2ee074ba0..ce575bfe9f 100644
--- a/packages/react/src/components/IonPicker.tsx
+++ b/packages/react/src/components/IonPicker.tsx
@@ -1,9 +1,9 @@
 import { PickerOptions, pickerController } from '@ionic/core/components';
-import { IonPicker as IonPickerCmp } from '@ionic/core/components/ion-picker.js';
+import { defineCustomElement } from '@ionic/core/components/ion-picker.js';
 
 import { createControllerComponent } from './createControllerComponent';
 
 export const IonPicker = /*@__PURE__*/ createControllerComponent<
   PickerOptions,
   HTMLIonPickerElement
->('ion-picker', pickerController, IonPickerCmp);
+>('ion-picker', pickerController, defineCustomElement);
diff --git a/packages/react/src/components/IonToast.tsx b/packages/react/src/components/IonToast.tsx
index 0c5fbf2b00..7c5f96eb84 100644
--- a/packages/react/src/components/IonToast.tsx
+++ b/packages/react/src/components/IonToast.tsx
@@ -3,7 +3,7 @@ import {
   ToastOptions as ToastOptionsCore,
   toastController as toastControllerCore,
 } from '@ionic/core/components';
-import { IonToast as IonToastCmp } from '@ionic/core/components/ion-toast.js';
+import { defineCustomElement } from '@ionic/core/components/ion-toast.js';
 
 import { createControllerComponent } from './createControllerComponent';
 
@@ -30,5 +30,5 @@ const toastController = {
 export const IonToast = /*@__PURE__*/ createControllerComponent<ToastOptions, HTMLIonToastElement>(
   'ion-toast',
   toastController,
-  IonToastCmp
+  defineCustomElement
 );
diff --git a/packages/react/src/components/createControllerComponent.tsx b/packages/react/src/components/createControllerComponent.tsx
index 4f3dc6d82c..11f6bb8068 100644
--- a/packages/react/src/components/createControllerComponent.tsx
+++ b/packages/react/src/components/createControllerComponent.tsx
@@ -4,7 +4,6 @@ import React from 'react';
 import {
   attachProps,
   dashToPascalCase,
-  defineCustomElement,
   setRef,
 } from './react-component-lib/utils';
 
@@ -27,9 +26,11 @@ export const createControllerComponent = <
 >(
   tagName: string,
   controller: { create: (options: OptionsType) => Promise<OverlayType> },
-  customElement?: any
+  defineCustomElement?: () => void
 ) => {
-  defineCustomElement(tagName, customElement);
+  if (defineCustomElement) {
+    defineCustomElement();
+  }
 
   const displayName = dashToPascalCase(tagName);
   const didDismissEventName = `on${displayName}DidDismiss`;