From 694c5ffe01930c337a86531c7251f847bab10517 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 24 Jan 2023 22:13:12 +0000 Subject: [PATCH 1/7] fix(popover): popover opens on chrome 109 --- core/src/components/popover/popover.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx index 633f6405021..319151f29ac 100644 --- a/core/src/components/popover/popover.tsx +++ b/core/src/components/popover/popover.tsx @@ -448,13 +448,8 @@ 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) { From 7bf967d629dedf2985cd7b451c1013275df32dce Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 24 Jan 2023 22:18:27 +0000 Subject: [PATCH 2/7] chore(): lint --- core/src/components/popover/popover.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx index 319151f29ac..43104641238 100644 --- a/core/src/components/popover/popover.tsx +++ b/core/src/components/popover/popover.tsx @@ -449,7 +449,14 @@ export class Popover implements ComponentInterface, PopoverInterface { } const { inline, delegate } = this.getDelegate(true); - this.usersElement = await attachComponent(delegate, this.el, this.component, ['popover-viewport'], this.componentProps, inline); + this.usersElement = await attachComponent( + delegate, + this.el, + this.component, + ['popover-viewport'], + this.componentProps, + inline + ); await deepReady(this.usersElement); if (!this.keyboardEvents) { From 93956042478b5cb688ab12665d57855157289b35 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 24 Jan 2023 23:27:34 +0000 Subject: [PATCH 3/7] chore(): remove non existent modal prop --- core/src/components/modal/modal.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx index 720023a0185..9aa3bbe82e6 100644 --- a/core/src/components/modal/modal.tsx +++ b/core/src/components/modal/modal.tsx @@ -512,13 +512,8 @@ 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); From bf3d493818a98066cb218aa806b4dd68f8bfb37e Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 24 Jan 2023 23:36:10 +0000 Subject: [PATCH 4/7] refactor(angular): pass modal/popover in delegate --- angular/src/providers/angular-delegate.ts | 26 +++++++++++++++++---- angular/src/providers/modal-controller.ts | 2 +- angular/src/providers/popover-controller.ts | 2 +- 3 files changed, 24 insertions(+), 6 deletions(-) diff --git a/angular/src/providers/angular-delegate.ts b/angular/src/providers/angular-delegate.ts index 7e5dca413de..565dc6aee7c 100644 --- a/angular/src/providers/angular-delegate.ts +++ b/angular/src/providers/angular-delegate.ts @@ -30,9 +30,10 @@ 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 +46,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 { 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 +79,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 index 6d91fe78b37..976924ffcb7 100644 --- a/angular/src/providers/modal-controller.ts +++ b/angular/src/providers/modal-controller.ts @@ -21,7 +21,7 @@ export class ModalController extends OverlayBaseController { 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 index 5a5857c9a31..a8b98413a84 100644 --- a/angular/src/providers/popover-controller.ts +++ b/angular/src/providers/popover-controller.ts @@ -21,7 +21,7 @@ export class PopoverController extends OverlayBaseController { 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'), }); } } From cde8a003bbde2cab9af94f7afcd7aef5eaa13bf3 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 24 Jan 2023 23:38:46 +0000 Subject: [PATCH 5/7] chore(): remove legacy vue logic --- packages/vue/src/framework-delegate.ts | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/vue/src/framework-delegate.ts b/packages/vue/src/framework-delegate.ts index 2908cff61ab..d63496391a8 100644 --- a/packages/vue/src/framework-delegate.ts +++ b/packages/vue/src/framework-delegate.ts @@ -21,14 +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); From 7355e5c9a68e7597a3874dbf8d6b540ceaeea95f Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 24 Jan 2023 23:43:50 +0000 Subject: [PATCH 6/7] chore(): lint --- angular/src/providers/angular-delegate.ts | 11 +++++++++-- angular/src/providers/modal-controller.ts | 7 ++++++- angular/src/providers/popover-controller.ts | 7 ++++++- core/src/components/modal/modal.tsx | 9 ++++++++- 4 files changed, 29 insertions(+), 5 deletions(-) diff --git a/angular/src/providers/angular-delegate.ts b/angular/src/providers/angular-delegate.ts index 565dc6aee7c..77ed39d6e7a 100644 --- a/angular/src/providers/angular-delegate.ts +++ b/angular/src/providers/angular-delegate.ts @@ -33,7 +33,14 @@ export class AngularDelegate { location?: ViewContainerRef, elementReferenceKey?: string ): AngularFrameworkDelegate { - return new AngularFrameworkDelegate(resolverOrInjector, injector, location, this.appRef, this.zone, elementReferenceKey); + return new AngularFrameworkDelegate( + resolverOrInjector, + injector, + location, + this.appRef, + this.zone, + elementReferenceKey + ); } } @@ -54,7 +61,7 @@ export class AngularFrameworkDelegate implements FrameworkDelegate { return this.zone.run(() => { return new Promise((resolve) => { const componentProps = { - ...params + ...params, }; /** diff --git a/angular/src/providers/modal-controller.ts b/angular/src/providers/modal-controller.ts index 976924ffcb7..63a24ca8f39 100644 --- a/angular/src/providers/modal-controller.ts +++ b/angular/src/providers/modal-controller.ts @@ -21,7 +21,12 @@ export class ModalController extends OverlayBaseController { return super.create({ ...opts, - delegate: this.angularDelegate.create(this.resolver ?? this.environmentInjector, this.injector, undefined, 'modal'), + 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 index a8b98413a84..9cfdebc47f0 100644 --- a/angular/src/providers/popover-controller.ts +++ b/angular/src/providers/popover-controller.ts @@ -21,7 +21,12 @@ export class PopoverController extends OverlayBaseController { return super.create({ ...opts, - delegate: this.angularDelegate.create(this.resolver ?? this.environmentInjector, this.injector, undefined, 'popover'), + 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 index 9aa3bbe82e6..6802d3959fc 100644 --- a/core/src/components/modal/modal.tsx +++ b/core/src/components/modal/modal.tsx @@ -513,7 +513,14 @@ export class Modal implements ComponentInterface, OverlayInterface { this.currentBreakpoint = this.initialBreakpoint; const { inline, delegate } = this.getDelegate(true); - this.usersElement = await attachComponent(delegate, this.el, this.component, ['ion-page'], this.componentProps, inline); + this.usersElement = await attachComponent( + delegate, + this.el, + this.component, + ['ion-page'], + this.componentProps, + inline + ); await deepReady(this.usersElement); From 619c731b0ea84e99a92dd52955d1e1e1754711ac Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 24 Jan 2023 23:48:36 +0000 Subject: [PATCH 7/7] chore(): lint --- packages/vue/src/framework-delegate.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/vue/src/framework-delegate.ts b/packages/vue/src/framework-delegate.ts index d63496391a8..851cadea1b0 100644 --- a/packages/vue/src/framework-delegate.ts +++ b/packages/vue/src/framework-delegate.ts @@ -21,7 +21,6 @@ export const VueDelegate = ( componentProps: any = {}, classes?: string[] ) => { - const div = document.createElement("div"); classes && div.classList.add(...classes); parentElement.appendChild(div);