From d50740029e616c202e9fc39e171d22b30b7817c6 Mon Sep 17 00:00:00 2001 From: Amanda Smith <90629384+amandaesmith3@users.noreply.github.com> Date: Tue, 14 Dec 2021 09:33:53 -0600 Subject: [PATCH] feat(select): add event for when overlay is dismissed (#24400) --- angular/src/directives/proxies.ts | 6 +++++- core/api.txt | 1 + core/src/components.d.ts | 4 ++++ core/src/components/select/readme.md | 13 +++++++------ core/src/components/select/select.tsx | 6 ++++++ core/src/components/select/test/basic/e2e.ts | 14 ++++++++++++++ packages/vue/src/proxies.ts | 1 + 7 files changed, 38 insertions(+), 7 deletions(-) diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index 529ac88d23..f5acff17a2 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -1568,6 +1568,10 @@ export declare interface IonSelect extends Components.IonSelect { * Emitted when the selection is cancelled. */ ionCancel: EventEmitter>; + /** + * Emitted when the overlay is dismissed. + */ + ionDismiss: EventEmitter>; /** * Emitted when the select has focus. */ @@ -1595,7 +1599,7 @@ export class IonSelect { constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ['ionChange', 'ionCancel', 'ionFocus', 'ionBlur']); + proxyOutputs(this, this.el, ['ionChange', 'ionCancel', 'ionDismiss', 'ionFocus', 'ionBlur']); } } diff --git a/core/api.txt b/core/api.txt index 08e3a24d30..e15713b58c 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1172,6 +1172,7 @@ ion-select,method,open,open(event?: UIEvent | undefined) => Promise ion-select,event,ionBlur,void,true ion-select,event,ionCancel,void,true ion-select,event,ionChange,SelectChangeEventDetail,true +ion-select,event,ionDismiss,void,true ion-select,event,ionFocus,void,true ion-select,css-prop,--padding-bottom ion-select,css-prop,--padding-end diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 70f6286e1c..9aa0e13371 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -6159,6 +6159,10 @@ declare namespace LocalJSX { * Emitted when the value has changed. */ "onIonChange"?: (event: CustomEvent) => void; + /** + * Emitted when the overlay is dismissed. + */ + "onIonDismiss"?: (event: CustomEvent) => void; /** * Emitted when the select has focus. */ diff --git a/core/src/components/select/readme.md b/core/src/components/select/readme.md index 03f7259eb9..4aa7ebd3d1 100644 --- a/core/src/components/select/readme.md +++ b/core/src/components/select/readme.md @@ -1385,12 +1385,13 @@ export default defineComponent({ ## Events -| Event | Description | Type | -| ----------- | ---------------------------------------- | ------------------------------------------- | -| `ionBlur` | Emitted when the select loses focus. | `CustomEvent` | -| `ionCancel` | Emitted when the selection is cancelled. | `CustomEvent` | -| `ionChange` | Emitted when the value has changed. | `CustomEvent>` | -| `ionFocus` | Emitted when the select has focus. | `CustomEvent` | +| Event | Description | Type | +| ------------ | ---------------------------------------- | ------------------------------------------- | +| `ionBlur` | Emitted when the select loses focus. | `CustomEvent` | +| `ionCancel` | Emitted when the selection is cancelled. | `CustomEvent` | +| `ionChange` | Emitted when the value has changed. | `CustomEvent>` | +| `ionDismiss` | Emitted when the overlay is dismissed. | `CustomEvent` | +| `ionFocus` | Emitted when the select has focus. | `CustomEvent` | ## Methods diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index a93df1fe20..cbb70625c4 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -107,6 +107,11 @@ export class Select implements ComponentInterface { */ @Event() ionCancel!: EventEmitter; + /** + * Emitted when the overlay is dismissed. + */ + @Event() ionDismiss!: EventEmitter; + /** * Emitted when the select has focus. */ @@ -176,6 +181,7 @@ export class Select implements ComponentInterface { overlay.onDidDismiss().then(() => { this.overlay = undefined; this.isExpanded = false; + this.ionDismiss.emit(); this.setFocus(); }); diff --git a/core/src/components/select/test/basic/e2e.ts b/core/src/components/select/test/basic/e2e.ts index 5d0154fd2b..82246b9d2c 100644 --- a/core/src/components/select/test/basic/e2e.ts +++ b/core/src/components/select/test/basic/e2e.ts @@ -10,6 +10,10 @@ test('select: basic', async () => { // Gender Alert Select let select = await page.find('#gender'); + + // add an event spy to the select + const ionDismiss = await select.spyOnEvent('ionDismiss'); + await select.click(); let alert = await page.find('ion-alert'); @@ -20,6 +24,8 @@ test('select: basic', async () => { await alert.callMethod('dismiss'); + expect(ionDismiss).toHaveReceivedEvent(); + // Skittles Action Sheet Select select = await page.find('#skittles'); await select.click(); @@ -32,6 +38,8 @@ test('select: basic', async () => { await actionSheet.callMethod('dismiss'); + expect(ionDismiss).toHaveReceivedEvent(); + // Custom Alert Select select = await page.find('#customAlertSelect'); await select.click(); @@ -44,6 +52,8 @@ test('select: basic', async () => { await alert.callMethod('dismiss'); + expect(ionDismiss).toHaveReceivedEvent(); + // Custom Popover Select select = await page.find('#customPopoverSelect'); await select.click(); @@ -72,6 +82,8 @@ test('select: basic', async () => { await popover.callMethod('dismiss'); + expect(ionDismiss).toHaveReceivedEvent(); + // Custom Action Sheet Select select = await page.find('#customActionSheetSelect'); await select.click(); @@ -84,6 +96,8 @@ test('select: basic', async () => { await actionSheet.callMethod('dismiss'); + expect(ionDismiss).toHaveReceivedEvent(); + for (const compare of compares) { expect(compare).toMatchScreenshot(); } diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index f265a759a9..3295aade6a 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -699,6 +699,7 @@ export const IonSelect = /*@__PURE__*/ defineContainer('ion-selec 'value', 'ionChange', 'ionCancel', + 'ionDismiss', 'ionFocus', 'ionBlur', 'ionStyle'