From 698b7e3d364d3bdbf4fda5b8583d8910df8791c7 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 9 Jun 2023 10:11:51 -0400 Subject: [PATCH] fix(popover): popover opens on chrome 109 --- angular/src/providers/angular-delegate.ts | 22 +++++++++++++++++++-- angular/src/providers/modal-controller.ts | 2 +- angular/src/providers/popover-controller.ts | 2 +- core/src/components/modal/modal.tsx | 6 +----- core/src/components/popover/popover.tsx | 6 +----- packages/vue/src/framework-delegate.ts | 9 --------- 6 files changed, 24 insertions(+), 23 deletions(-) diff --git a/angular/src/providers/angular-delegate.ts b/angular/src/providers/angular-delegate.ts index 5f0912d10b1..02a4553bca8 100644 --- a/angular/src/providers/angular-delegate.ts +++ b/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 { 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); }); diff --git a/angular/src/providers/modal-controller.ts b/angular/src/providers/modal-controller.ts index 170d4e1c60f..0dff6b275cd 100644 --- a/angular/src/providers/modal-controller.ts +++ b/angular/src/providers/modal-controller.ts @@ -19,7 +19,7 @@ export class ModalController extends OverlayBaseController { return super.create({ ...opts, - delegate: this.angularDelegate.create(this.resolver, this.injector) + delegate: this.angularDelegate.create(this.resolver, this.injector, undefined, 'modal') }); } } diff --git a/angular/src/providers/popover-controller.ts b/angular/src/providers/popover-controller.ts index f86fd2b1c0b..dcfed7ab039 100644 --- a/angular/src/providers/popover-controller.ts +++ b/angular/src/providers/popover-controller.ts @@ -19,7 +19,7 @@ export class PopoverController extends OverlayBaseController { return super.create({ ...opts, - delegate: this.angularDelegate.create(this.resolver, this.injector) + delegate: this.angularDelegate.create(this.resolver, this.injector, undefined, 'popover') }); } } diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx index ffd345285a5..56074ca05dc 100644 --- a/core/src/components/modal/modal.tsx +++ b/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')); diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx index f4db06fd73c..603c980f369 100644 --- a/core/src/components/popover/popover.tsx +++ b/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); } diff --git a/packages/vue/src/framework-delegate.ts b/packages/vue/src/framework-delegate.ts index 82d465c00e9..f0bac4053be 100644 --- a/packages/vue/src/framework-delegate.ts +++ b/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);