javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 08:09:32 +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

1
core/api.txt
View File

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

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