fix(kit): InputDateRange not reset initial value to min/max and sho…

…w actual in calendar (#10250)
taiga-family · Jan 27, 2025 · 1e7d185 · 1e7d185
1 parent 8ead5b4
commit 1e7d185
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 5 deletions.
diff --git a/projects/demo-playwright/tests/kit/input-date-range/input-date-range.spec.ts b/projects/demo-playwright/tests/kit/input-date-range/input-date-range.spec.ts
@@ -185,5 +185,22 @@ test.describe('InputDateRange', () => {
                 '08-calendar-correct-selected-period-after-close-open.png',
             );
         });
+
+        test('Actual min/max in calendar', async () => {
+            const example = documentationPage.getExample('#base');
+
+            const inputDateRange = new TuiInputDateRangePO(
+                example.locator('tui-input-date-range'),
+            );
+
+            await inputDateRange.textfield.click();
+
+            await expect(inputDateRange.textfield).toHaveScreenshot(
+                '09-input-date-range-actual-min-max.png',
+            );
+            await expect(inputDateRange.calendarRange).toHaveScreenshot(
+                '09-input-date-range-calendar-actual-min-max.png',
+            );
+        });
     });
 });
diff --git a/projects/demo/src/modules/components/input-date-range/examples/1/index.ts b/projects/demo/src/modules/components/input-date-range/examples/1/index.ts
@@ -17,7 +17,7 @@ export class TuiInputDateRangeExample1 {
         ),
     });
 
-    readonly min = new TuiDay(2000, 2, 20);
+    readonly min = new TuiDay(2018, 2, 25);
 
     readonly max = new TuiDay(2040, 2, 20);
 }
diff --git a/projects/kit/components/input-date-range/input-date-range.component.ts b/projects/kit/components/input-date-range/input-date-range.component.ts
@@ -189,11 +189,29 @@ export class TuiInputDateRangeComponent
     }
 
     get computedMin(): TuiDay {
-        return this.min ?? TUI_FIRST_DAY;
+        /**
+         * TODO: we can delete this workaround in v4.0
+         * after solving this issue:
+         * https://github.com/taiga-family/maskito/issues/604
+         */
+        if (this.value && this.control?.pristine) {
+            return TUI_FIRST_DAY;
+        }
+
+        return this.min ?? this.options.min;
     }
 
     get computedMax(): TuiDay {
-        return this.max ?? TUI_LAST_DAY;
+        /**
+         * TODO: we can delete this workaround in v4.0
+         * after solving this issue:
+         * https://github.com/taiga-family/maskito/issues/604
+         */
+        if (this.value && this.control?.pristine) {
+            return TUI_LAST_DAY;
+        }
+
+        return this.max ?? this.options.max;
     }
 
     get nativeFocusableElement(): HTMLInputElement | null {

diff --git a/projects/kit/components/input-date-range/input-date-range.template.html b/projects/kit/components/input-date-range/input-date-range.template.html
@@ -60,9 +60,9 @@
             [disabledItemHandler]="disabledItemHandler"
             [items]="items"
             [markerHandler]="markerHandler"
-            [max]="computedMax"
+            [max]="max"
             [maxLength]="maxLength"
-            [min]="computedMin"
+            [min]="min"
             [minLength]="minLength"
             [value]="value"
             (valueChange)="onRangeChange($event)"

diff --git a/projects/kit/components/input-date-range/test/input-date-range.component.spec.ts b/projects/kit/components/input-date-range/test/input-date-range.component.spec.ts
@@ -180,9 +180,15 @@ describe('InputDateRangeComponent', () => {
             it('When entering two dates, the value is truncated by min / max is updated', () => {
                 testComponent.min = new TuiDay(2001, 6, 15);
                 testComponent.max = new TuiDay(2019, 6, 15);
+
                 fixture.detectChanges();
+
+                // min-max mask triggered only if value changed via UI (is not pristine)
+                testComponent.control.markAsDirty();
+
                 inputPO.sendText(`15.07.2000${RANGE_SEPARATOR_CHAR}15.07.2020`);
 
+                expect(inputPO.value).toBe('15.07.2001 – 15.07.2019');
                 expect(testComponent.control.value.getFormattedDayRange('DMY', '.')).toBe(
                     `15.07.2001${RANGE_SEPARATOR_CHAR}15.07.2019`,
                 );
@@ -376,6 +382,9 @@ describe('InputDateRangeComponent', () => {
         });
 
         it('transforms min day as output (if typed day is less than min day)', () => {
+            // min-max mask triggered only if value changed via UI (is not pristine)
+            testComponent.control.markAsDirty();
+
             inputPO.sendText('19.02.1861-10.03.1995');
 
             expect(inputPO.value).toBe('01.01.1900 – 10.03.1995');