feat(select): add event for when overlay is dismissed (#24400)

ionic-team · Mar 10, 2022 · b835b7c · b835b7c
1 parent c666dec
commit b835b7c
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 7 deletions.
diff --git 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<CustomEvent<void>>;
+  /**
+   * Emitted when the overlay is dismissed. 
+   */
+  ionDismiss: EventEmitter<CustomEvent<void>>;
   /**
    * 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
@@ -1172,6 +1172,7 @@ ion-select,method,open,open(event?: UIEvent | undefined) => Promise<any>
 ion-select,event,ionBlur,void,true
 ion-select,event,ionCancel,void,true
 ion-select,event,ionChange,SelectChangeEventDetail<any>,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
@@ -6159,6 +6159,10 @@ declare namespace LocalJSX {
           * Emitted when the value has changed.
          */
         "onIonChange"?: (event: CustomEvent<SelectChangeEventDetail>) => void;
+        /**
+          * Emitted when the overlay is dismissed.
+         */
+        "onIonDismiss"?: (event: CustomEvent<void>) => void;
         /**
           * Emitted when the select has focus.
          */

diff --git 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<void>`                         |
-| `ionCancel` | Emitted when the selection is cancelled. | `CustomEvent<void>`                         |
-| `ionChange` | Emitted when the value has changed.      | `CustomEvent<SelectChangeEventDetail<any>>` |
-| `ionFocus`  | Emitted when the select has focus.       | `CustomEvent<void>`                         |
+| Event        | Description                              | Type                                        |
+| ------------ | ---------------------------------------- | ------------------------------------------- |
+| `ionBlur`    | Emitted when the select loses focus.     | `CustomEvent<void>`                         |
+| `ionCancel`  | Emitted when the selection is cancelled. | `CustomEvent<void>`                         |
+| `ionChange`  | Emitted when the value has changed.      | `CustomEvent<SelectChangeEventDetail<any>>` |
+| `ionDismiss` | Emitted when the overlay is dismissed.   | `CustomEvent<void>`                         |
+| `ionFocus`   | Emitted when the select has focus.       | `CustomEvent<void>`                         |
 
 
 ## Methods

diff --git 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<void>;
 
+  /**
+   * Emitted when the overlay is dismissed.
+   */
+  @Event() ionDismiss!: EventEmitter<void>;
+
   /**
    * 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
@@ -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
@@ -699,6 +699,7 @@ export const IonSelect = /*@__PURE__*/ defineContainer<JSX.IonSelect>('ion-selec
   'value',
   'ionChange',
   'ionCancel',
+  'ionDismiss',
   'ionFocus',
   'ionBlur',
   'ionStyle'