fix(datetime): empty string is treated as no value (#26131)

resolves #26116
ionic-team · Oct 17, 2022 · 51ab5f6 · 51ab5f6
1 parent 0548fe8
commit 51ab5f6
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 4 deletions.
diff --git a/angular/src/directives/control-value-accessors/value-accessor.ts b/angular/src/directives/control-value-accessors/value-accessor.ts
@@ -19,7 +19,7 @@ export class ValueAccessor implements ControlValueAccessor, AfterViewInit, OnDes
 
   writeValue(value: any): void {
     /**
-     * TODO for Ionic 6:
+     * TODO FW-2646
      * Change `value == null ? '' : value;`
      * to `value`. This was a fix for IE9, but IE9
      * is no longer supported; however, this change

diff --git a/core/src/components/datetime-button/datetime-button.tsx b/core/src/components/datetime-button/datetime-button.tsx
@@ -160,7 +160,8 @@ export class DatetimeButton implements ComponentInterface {
    * to keep checking if the datetime value is `string` or `string[]`.
    */
   private getParsedDateValues = (value?: string[] | string | null): string[] => {
-    if (value === undefined || value === null) {
+    // TODO FW-2646 Remove value === ''
+    if (value === '' || value === undefined || value === null) {
       return [];
     }
 

diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
@@ -1154,8 +1154,11 @@ export class Datetime implements ComponentInterface {
   }
 
   private processValue = (value?: string | string[] | null) => {
-    const hasValue = value !== null && value !== undefined;
-    let valueToProcess = parseDate(value ?? getToday());
+    /**
+     * TODO FW-2646 remove value !== ''
+     */
+    const hasValue = value !== '' && value !== null && value !== undefined;
+    let valueToProcess = parseDate(hasValue ? value : getToday());
 
     const { minParts, maxParts, multiple } = this;
     if (!multiple && Array.isArray(value)) {

diff --git a/core/src/components/datetime/test/values/datetime.e2e.ts b/core/src/components/datetime/test/values/datetime.e2e.ts
@@ -50,3 +50,17 @@ test.describe('datetime: values', () => {
     await expect(items).toHaveText(['01', '02', '03']);
   });
 });
+
+test('setting value to empty string should treat it as having no date', async ({ page, skip }) => {
+  skip.rtl();
+  skip.mode('ios');
+  await page.setContent(`
+    <ion-datetime value="" locale="en-US"></ion-datetime>
+  `);
+
+  await page.waitForSelector('.datetime-ready');
+
+  // Should render current month with today outlined.
+  const calendarDayToday = page.locator('ion-datetime .calendar-day-today');
+  await expect(calendarDayToday).toBeVisible();
+});