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

fix(datetime): emit ionChange for non-calendar picker presentation (#25380)

Browse Source 
Resolves #25375
This commit is contained in:
Sean Perkins
2022-06-01 12:11:03 -04:00
committed by GitHub
parent 3e310250ba
commit 4e6a60b6a4
2 changed files with 67 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
core/src/components/datetime/datetime.tsx
View File

@ -442,12 +442,13 @@ export class Datetime implements ComponentInterface {
@Method()
async confirm(closeOverlay = false) {
/**
* If highlightActiveParts is false, this means the datetime was inited
* without a value, and the user hasn't selected one yet. We shouldn't
* update the value in this case, since otherwise it would be mysteriously
* set to today.
* We only update the value if the presentation is not a calendar picker,
* or if `highlightActiveParts` is true; indicating that the user
* has selected a date from the calendar picker.
*
* Otherwise "today" would accidentally be set as the value.
*/
if (this.highlightActiveParts) {
if (this.highlightActiveParts || !this.isCalendarPicker) {
/**
* Prevent convertDataToISO from doing any
* kind of transformation based on timezone
@ -522,6 +523,11 @@ export class Datetime implements ComponentInterface {
this.confirm();
};
private get isCalendarPicker() {
const { presentation } = this;
return presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
}
/**
* Stencil sometimes sets calendarBodyRef to null on rerender, even though
* the element is present. Query for it manually as a fallback.

56
core/src/components/datetime/test/presentation/datetime.e2e.ts
View File

@ -27,6 +27,62 @@ test.describe('datetime: presentation', () => {
);
}
});
test('presentation: time: should emit ionChange', async ({ page }) => {
await page.goto(`/src/components/datetime/test/presentation`);
const ionChangeSpy = await page.spyOnEvent('ionChange');
await page.locator('select').selectOption('time');
await page.waitForChanges();
await page.locator('text=AM').click();
await ionChangeSpy.next();
expect(ionChangeSpy.length).toBe(1);
});
test('presentation: month-year: should emit ionChange', async ({ page }) => {
await page.goto(`/src/components/datetime/test/presentation`);
const ionChangeSpy = await page.spyOnEvent('ionChange');
await page.locator('select').selectOption('month-year');
await page.waitForChanges();
await page.locator('text=April').click();
await ionChangeSpy.next();
expect(ionChangeSpy.length).toBe(1);
});
test('presentation: month: should emit ionChange', async ({ page }) => {
await page.goto(`/src/components/datetime/test/presentation`);
const ionChangeSpy = await page.spyOnEvent('ionChange');
await page.locator('select').selectOption('month');
await page.waitForChanges();
await page.locator('text=April').click();
await ionChangeSpy.next();
expect(ionChangeSpy.length).toBe(1);
});
test('presentation: year: should emit ionChange', async ({ page }) => {
await page.goto(`/src/components/datetime/test/presentation`);
const ionChangeSpy = await page.spyOnEvent('ionChange');
await page.locator('select').selectOption('year');
await page.waitForChanges();
await page.locator('text=2021').click();
await ionChangeSpy.next();
expect(ionChangeSpy.length).toBe(1);
});
});
test.describe('datetime: presentation: time', () => {