diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index b11e949c4f..4d5c6e5e60 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -541,7 +541,7 @@ export class Datetime implements ComponentInterface {
}
if (closeOverlay) {
- this.closeParentOverlay();
+ this.closeParentOverlay(CONFIRM_ROLE);
}
}
@@ -566,7 +566,7 @@ export class Datetime implements ComponentInterface {
this.ionCancel.emit();
if (closeOverlay) {
- this.closeParentOverlay();
+ this.closeParentOverlay(CANCEL_ROLE);
}
}
@@ -616,13 +616,13 @@ export class Datetime implements ComponentInterface {
return Array.isArray(activeParts) ? activeParts[0] : activeParts;
};
- private closeParentOverlay = () => {
+ private closeParentOverlay = (role: string) => {
const popoverOrModal = this.el.closest('ion-modal, ion-popover') as
| HTMLIonModalElement
| HTMLIonPopoverElement
| null;
if (popoverOrModal) {
- popoverOrModal.dismiss();
+ popoverOrModal.dismiss(undefined, role);
}
};
@@ -2645,5 +2645,7 @@ export class Datetime implements ComponentInterface {
}
let datetimeIds = 0;
+const CANCEL_ROLE = 'datetime-cancel';
+const CONFIRM_ROLE = 'datetime-confirm';
const WHEEL_ITEM_PART = 'wheel-item';
const WHEEL_ITEM_ACTIVE_PART = `active`;
diff --git a/core/src/components/datetime/test/overlay-roles/datetime.e2e.ts b/core/src/components/datetime/test/overlay-roles/datetime.e2e.ts
new file mode 100644
index 0000000000..2c7f9b1f8d
--- /dev/null
+++ b/core/src/components/datetime/test/overlay-roles/datetime.e2e.ts
@@ -0,0 +1,41 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) => {
+ test.describe(title('datetime: overlay roles'), () => {
+ test.beforeEach(async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+ `,
+ config
+ );
+ });
+ test('should pass role to overlay when calling confirm method', async ({ page }) => {
+ const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+ const modal = page.locator('ion-modal');
+ const datetime = page.locator('ion-datetime');
+
+ await modal.evaluate((el: HTMLIonModalElement) => el.present());
+
+ await datetime.evaluate((el: HTMLIonDatetimeElement) => el.confirm(true));
+
+ await ionModalDidDismiss.next();
+ expect(ionModalDidDismiss).toHaveReceivedEventDetail({ data: undefined, role: 'datetime-confirm' });
+ });
+ test('should pass role to overlay when calling cancel method', async ({ page }) => {
+ const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+ const modal = page.locator('ion-modal');
+ const datetime = page.locator('ion-datetime');
+
+ await modal.evaluate((el: HTMLIonModalElement) => el.present());
+
+ await datetime.evaluate((el: HTMLIonDatetimeElement) => el.cancel(true));
+
+ await ionModalDidDismiss.next();
+ expect(ionModalDidDismiss).toHaveReceivedEventDetail({ data: undefined, role: 'datetime-cancel' });
+ });
+ });
+});
diff --git a/core/src/components/datetime/test/overlay-roles/index.html b/core/src/components/datetime/test/overlay-roles/index.html
new file mode 100644
index 0000000000..c229f4872a
--- /dev/null
+++ b/core/src/components/datetime/test/overlay-roles/index.html
@@ -0,0 +1,66 @@
+
+
+
+
+ Datetime - Overlay Roles
+
+
+
+
+
+
+
+
+
+
+
+ Datetime - Overlay Roles
+
+
+
+ Present Modal
+
+
+
+
+