diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index 529ac88d23a..0c3e5c333ac 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 ce9578268f2..fdc7412069e 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 fa3c05f3e6b..6eeaab48121 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -6147,6 +6147,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 03f7259eb93..4aa7ebd3d19 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 dadcd457078..d5a4179deb6 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 5d0154fd2b6..82246b9d2c8 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 f265a759a9f..3295aade6af 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'