fix(popover): popover opens on chrome 109

angular/src/providers/angular-delegate.ts

@@ -15,8 +15,9 @@ export class AngularDelegate {
     resolver: ComponentFactoryResolver,
     injector: Injector,
     location?: ViewContainerRef,
+    elementReferenceKey?: string
   ) {
-    return new AngularFrameworkDelegate(resolver, injector, location, this.appRef, this.zone);
+    return new AngularFrameworkDelegate(resolver, injector, location, this.appRef, this.zone, elementReferenceKey);
   }
 }
 
@@ -31,15 +32,32 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
     private location: ViewContainerRef | undefined,
     private appRef: ApplicationRef,
     private zone: NgZone,
+    private elementReferenceKey?: string
   ) {}
 
   attachViewToDom(container: any, component: any, params?: any, cssClasses?: string[]): Promise<any> {
     return this.zone.run(() => {
       return new Promise(resolve => {
+        const componentProps = {
+          ...params,
+        };
+
+        /**
+         * Ionic Angular passes a reference to a modal
+         * or popover that can be accessed using a
+         * variable in the overlay component. If
+         * elementReferenceKey is defined, then we should
+         * pass a reference to the component using
+         * elementReferenceKey as the key.
+         */
+        if (this.elementReferenceKey !== undefined) {
+          componentProps[this.elementReferenceKey] = container;
+        }
+
         const el = attachView(
           this.zone, this.resolver, this.injector, this.location, this.appRef,
           this.elRefMap, this.elEventsMap,
-          container, component, params, cssClasses
+          container, component, componentProps, cssClasses
         );
         resolve(el);
       });

angular/src/providers/modal-controller.ts

@@ -19,7 +19,7 @@ export class ModalController extends OverlayBaseController<ModalOptions, HTMLIon
   create(opts: ModalOptions): Promise<HTMLIonModalElement> {
     return super.create({
       ...opts,
-      delegate: this.angularDelegate.create(this.resolver, this.injector)
+      delegate: this.angularDelegate.create(this.resolver, this.injector, undefined, 'modal')
     });
   }
 }

angular/src/providers/popover-controller.ts

@@ -19,7 +19,7 @@ export class PopoverController extends OverlayBaseController<PopoverOptions, HTM
   create(opts: PopoverOptions): Promise<HTMLIonPopoverElement> {
     return super.create({
       ...opts,
-      delegate: this.angularDelegate.create(this.resolver, this.injector)
+      delegate: this.angularDelegate.create(this.resolver, this.injector, undefined, 'popover')
     });
   }
 }

core/src/components/modal/modal.tsx

@@ -152,11 +152,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
     if (!container) {
       throw new Error('container is undefined');
     }
-    const componentProps = {
-      ...this.componentProps,
-      modal: this.el
-    };
-    this.usersElement = await attachComponent(this.delegate, container, this.component, ['ion-page'], componentProps);
+    this.usersElement = await attachComponent(this.delegate, container, this.component, ['ion-page'], this.componentProps);
     await deepReady(this.usersElement);
 
     writeTask(() => this.el.classList.add('show-modal'));

core/src/components/popover/popover.tsx

@@ -137,11 +137,7 @@ export class Popover implements ComponentInterface, OverlayInterface {
     if (!container) {
       throw new Error('container is undefined');
     }
-    const data = {
-      ...this.componentProps,
-      popover: this.el
-    };
-    this.usersElement = await attachComponent(this.delegate, container, this.component, ['popover-viewport', (this.el as any)['s-sc']], data);
+    this.usersElement = await attachComponent(this.delegate, container, this.component, ['popover-viewport', (this.el as any)['s-sc']], this.componentProps);
     await deepReady(this.usersElement);
     return present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, this.event);
   }

packages/vue/src/framework-delegate.ts

@@ -3,15 +3,6 @@ import { addTeleportedUserComponent, removeTeleportedUserComponent } from './com
 export const VueDelegate = (addFn = addTeleportedUserComponent, removeFn = removeTeleportedUserComponent) => {
   let Component: VNode | undefined;
   const attachViewToDom = (parentElement: HTMLElement, component: any, componentProps: any = {}, classes?: string[]) => {
-    /**
-     * Ionic Framework passes in modal and popover element
-     * refs as props, but if these are not defined
-     * on the Vue component instance as props, Vue will
-     * warn the user.
-     */
-    delete componentProps['modal'];
-    delete componentProps['popover'];
-
     const div = document.createElement('div');
     classes && div.classList.add(...classes);
     parentElement.appendChild(div);