fix(datetime): don't update value on confirm call if no date was sele…

…cted (#25338)
ionic-team · May 24, 2022 · 9e5b10a · 9e5b10a
1 parent 0156be6
commit 9e5b10a
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 10 deletions.
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
@@ -442,18 +442,26 @@ export class Datetime implements ComponentInterface {
   @Method()
   async confirm(closeOverlay = false) {
     /**
-     * Prevent convertDataToISO from doing any
-     * kind of transformation based on timezone
-     * This cancels out any change it attempts to make
-     *
-     * Important: Take the timezone offset based on
-     * the date that is currently selected, otherwise
-     * there can be 1 hr difference when dealing w/ DST
+     * 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.
      */
-    const date = new Date(convertDataToISO(this.activeParts));
-    this.activeParts.tzOffset = date.getTimezoneOffset() * -1;
+    if (this.highlightActiveParts) {
+      /**
+       * Prevent convertDataToISO from doing any
+       * kind of transformation based on timezone
+       * This cancels out any change it attempts to make
+       *
+       * Important: Take the timezone offset based on
+       * the date that is currently selected, otherwise
+       * there can be 1 hr difference when dealing w/ DST
+       */
+      const date = new Date(convertDataToISO(this.activeParts));
+      this.activeParts.tzOffset = date.getTimezoneOffset() * -1;
 
-    this.value = convertDataToISO(this.activeParts);
+      this.value = convertDataToISO(this.activeParts);
+    }
 
     if (closeOverlay) {
       this.closeParentOverlay();

diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts b/core/src/components/datetime/test/basic/datetime.e2e.ts
@@ -29,3 +29,20 @@ test.describe('datetime: selecting a day', () => {
     await testHighlight(page, 'custom-datetime');
   });
 });
+
+test.describe('datetime: confirm date', () => {
+  test('should not update value if Done was clicked without selecting a day first', async ({ page }) => {
+    await page.goto('/src/components/datetime/test/basic');
+
+    const datetime = page.locator('#custom-datetime');
+
+    const value = await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value);
+    expect(value).toBeUndefined();
+
+    await datetime.evaluate(async (el: HTMLIonDatetimeElement) => {
+      await el.confirm();
+    });
+    const valueAgain = await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value);
+    expect(valueAgain).toBeUndefined();
+  });
+});