javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Hans Krywalsky
2021-12-14 15:39:25 +01:00
committed by GitHub
parent 03dd372933
commit c1ecf94e4e
7 changed files with 38 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components.d.ts vendored
View File

@@ -6147,6 +6147,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.
*/

13
core/src/components/select/readme.md
View File

@@ -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

6
core/src/components/select/select.tsx
View File

@@ -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();
});

14
core/src/components/select/test/basic/e2e.ts
View File

@@ -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();
}