fix(popover): popover opens on chrome 109 (#26672)

resolves #26643
ionic-team · Jan 30, 2023 · 69d89ea · 69d89ea
1 parent 95a3c69
commit 69d89ea
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 27 deletions.
diff --git a/angular/src/providers/angular-delegate.ts b/angular/src/providers/angular-delegate.ts
@@ -30,9 +30,17 @@ export class AngularDelegate {
   create(
     resolverOrInjector: ComponentFactoryResolver,
     injector: Injector,
-    location?: ViewContainerRef
+    location?: ViewContainerRef,
+    elementReferenceKey?: string
   ): AngularFrameworkDelegate {
-    return new AngularFrameworkDelegate(resolverOrInjector, injector, location, this.appRef, this.zone);
+    return new AngularFrameworkDelegate(
+      resolverOrInjector,
+      injector,
+      location,
+      this.appRef,
+      this.zone,
+      elementReferenceKey
+    );
   }
 }
 
@@ -45,12 +53,29 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
     private injector: Injector,
     private location: ViewContainerRef | undefined,
     private appRef: ApplicationRef,
-    private zone: NgZone
+    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.resolverOrInjector,
@@ -61,7 +86,7 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
           this.elEventsMap,
           container,
           component,
-          params,
+          componentProps,
           cssClasses
         );
         resolve(el);

diff --git a/angular/src/providers/modal-controller.ts b/angular/src/providers/modal-controller.ts
@@ -21,7 +21,12 @@ export class ModalController extends OverlayBaseController<ModalOptions, HTMLIon
   create(opts: ModalOptions): Promise<HTMLIonModalElement> {
     return super.create({
       ...opts,
-      delegate: this.angularDelegate.create(this.resolver ?? this.environmentInjector, this.injector),
+      delegate: this.angularDelegate.create(
+        this.resolver ?? this.environmentInjector,
+        this.injector,
+        undefined,
+        'modal'
+      ),
     });
   }
 }
diff --git a/angular/src/providers/popover-controller.ts b/angular/src/providers/popover-controller.ts
@@ -21,7 +21,12 @@ export class PopoverController extends OverlayBaseController<PopoverOptions, HTM
   create(opts: PopoverOptions): Promise<HTMLIonPopoverElement> {
     return super.create({
       ...opts,
-      delegate: this.angularDelegate.create(this.resolver ?? this.environmentInjector, this.injector),
+      delegate: this.angularDelegate.create(
+        this.resolver ?? this.environmentInjector,
+        this.injector,
+        undefined,
+        'popover'
+      ),
     });
   }
 }
diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
@@ -512,13 +512,15 @@ export class Modal implements ComponentInterface, OverlayInterface {
      */
     this.currentBreakpoint = this.initialBreakpoint;
 
-    const data = {
-      ...this.componentProps,
-      modal: this.el,
-    };
-
     const { inline, delegate } = this.getDelegate(true);
-    this.usersElement = await attachComponent(delegate, this.el, this.component, ['ion-page'], data, inline);
+    this.usersElement = await attachComponent(
+      delegate,
+      this.el,
+      this.component,
+      ['ion-page'],
+      this.componentProps,
+      inline
+    );
 
     await deepReady(this.usersElement);
 

diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx
@@ -448,13 +448,15 @@ export class Popover implements ComponentInterface, PopoverInterface {
       await this.currentTransition;
     }
 
-    const data = {
-      ...this.componentProps,
-      popover: this.el,
-    };
-
     const { inline, delegate } = this.getDelegate(true);
-    this.usersElement = await attachComponent(delegate, this.el, this.component, ['popover-viewport'], data, inline);
+    this.usersElement = await attachComponent(
+      delegate,
+      this.el,
+      this.component,
+      ['popover-viewport'],
+      this.componentProps,
+      inline
+    );
     await deepReady(this.usersElement);
 
     if (!this.keyboardEvents) {

diff --git a/packages/vue/src/framework-delegate.ts b/packages/vue/src/framework-delegate.ts
@@ -21,15 +21,6 @@ export const VueDelegate = (
     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);