From 674fed5d7ba6e9486b6f07d334ae109d6988b46f Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Tue, 31 May 2022 15:20:59 -0400 Subject: [PATCH 1/5] fix(datetime): emit ionChange for non-calendar picker presentation --- core/src/components/datetime/datetime.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index 1cd0eb86edb..514dd4a3fda 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -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,10 @@ export class Datetime implements ComponentInterface { this.confirm(); }; + private get isCalendarPicker() { + return this.presentation === 'date' || this.presentation === 'date-time' || this.presentation === 'time-date'; + } + /** * Stencil sometimes sets calendarBodyRef to null on rerender, even though * the element is present. Query for it manually as a fallback. From c2aa4779d1ed7d92466e25ea0a1be3a065a53085 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Tue, 31 May 2022 15:21:12 -0400 Subject: [PATCH 2/5] test(datetime): validate presentations emit ionChange --- .../test/presentation/datetime.e2e.ts | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts b/core/src/components/datetime/test/presentation/datetime.e2e.ts index 94ad22e9c46..547abb727a9 100644 --- a/core/src/components/datetime/test/presentation/datetime.e2e.ts +++ b/core/src/components/datetime/test/presentation/datetime.e2e.ts @@ -27,6 +27,63 @@ 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=12 >> nth=0').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', () => { From c7f5ddfb549fc8d4bfb27b9be1a5e105294f2d3e Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Tue, 31 May 2022 15:24:22 -0400 Subject: [PATCH 3/5] chore(): prettier --- core/src/components/datetime/test/presentation/datetime.e2e.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts b/core/src/components/datetime/test/presentation/datetime.e2e.ts index 547abb727a9..54f06e21570 100644 --- a/core/src/components/datetime/test/presentation/datetime.e2e.ts +++ b/core/src/components/datetime/test/presentation/datetime.e2e.ts @@ -83,7 +83,6 @@ test.describe('datetime: presentation', () => { expect(ionChangeSpy.length).toBe(1); }); - }); test.describe('datetime: presentation: time', () => { From b365451e2db72c42aa2dc2d586a5334a7f4e017a Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Tue, 31 May 2022 16:03:54 -0400 Subject: [PATCH 4/5] test(): click "AM" for time presentation --- core/src/components/datetime/test/presentation/datetime.e2e.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts b/core/src/components/datetime/test/presentation/datetime.e2e.ts index 54f06e21570..8f254747c2e 100644 --- a/core/src/components/datetime/test/presentation/datetime.e2e.ts +++ b/core/src/components/datetime/test/presentation/datetime.e2e.ts @@ -35,7 +35,7 @@ test.describe('datetime: presentation', () => { await page.locator('select').selectOption('time'); await page.waitForChanges(); - await page.locator('text=12 >> nth=0').click(); + await page.locator('text=AM').click(); await ionChangeSpy.next(); From 3a7f21e6a71636fb87af028d17f2b97d6fbeac8e Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Wed, 1 Jun 2022 11:02:34 -0400 Subject: [PATCH 5/5] chore(): use local reference to presentation Co-authored-by: Liam DeBeasi --- core/src/components/datetime/datetime.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index 514dd4a3fda..21298826f3d 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -524,7 +524,8 @@ export class Datetime implements ComponentInterface { }; private get isCalendarPicker() { - return this.presentation === 'date' || this.presentation === 'date-time' || this.presentation === 'time-date'; + const { presentation } = this; + return presentation === 'date' || presentation === 'date-time' || presentation === 'time-date'; } /**