fix(legacy): InputDateRange triggers cyclic change detection ticks (#…

…8706)
taiga-family · Aug 28, 2024 · c7bc044 · c7bc044
1 parent 48cc312
commit c7bc044
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 24 deletions.
diff --git a/projects/kit/components/calendar-range/calendar-range.component.ts b/projects/kit/components/calendar-range/calendar-range.component.ts
@@ -51,7 +51,6 @@ export class TuiCalendarRange implements OnInit, OnChanges {
     private selectedPeriod: TuiDayRangePeriod | null = null;
     protected readonly otherDateText$ = inject(TUI_OTHER_DATE_TEXT);
     protected readonly icons = inject(TUI_COMMON_ICONS);
-    protected readonly cdr = inject(ChangeDetectorRef);
     protected previousValue: TuiDayRange | null = null;
     protected hoveredItem: TuiDay | null = null;
     protected readonly capsMapper = TUI_DAY_CAPS_MAPPER;
@@ -94,7 +93,7 @@ export class TuiCalendarRange implements OnInit, OnChanges {
 
     constructor() {
         inject<Observable<TuiDayRange | null>>(TUI_CALENDAR_DATE_STREAM, {optional: true})
-            ?.pipe(tuiWatch(this.cdr), takeUntilDestroyed())
+            ?.pipe(tuiWatch(inject(ChangeDetectorRef)), takeUntilDestroyed())
             .subscribe((value) => {
                 this.value = value;
             });

diff --git a/projects/legacy/components/input-date-range/input-date-range.component.ts b/projects/legacy/components/input-date-range/input-date-range.component.ts
@@ -1,8 +1,6 @@
-import type {AfterViewChecked} from '@angular/core';
 import {
     ChangeDetectionStrategy,
     Component,
-    forwardRef,
     inject,
     Input,
     ViewChild,
@@ -35,10 +33,7 @@ import {
 import type {TuiMarkerHandler} from '@taiga-ui/core/components/calendar';
 import {TUI_DATE_FORMAT, TUI_DEFAULT_DATE_FORMAT} from '@taiga-ui/core/tokens';
 import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types';
-import {
-    TuiCalendarRange,
-    type TuiDayRangePeriod,
-} from '@taiga-ui/kit/components/calendar-range';
+import {type TuiDayRangePeriod} from '@taiga-ui/kit/components/calendar-range';
 import type {TuiInputDateOptions} from '@taiga-ui/kit/tokens';
 import {
     TUI_DATE_RANGE_VALUE_TRANSFORMER,
@@ -79,14 +74,11 @@ import {map} from 'rxjs';
 })
 export class TuiInputDateRangeComponent
     extends AbstractTuiNullableControl<TuiDayRange>
-    implements TuiFocusableElementAccessor, AfterViewChecked
+    implements TuiFocusableElementAccessor
 {
     @ViewChild(TuiPrimitiveTextfieldComponent)
     private readonly textfield?: TuiPrimitiveTextfieldComponent;
 
-    @ViewChild(forwardRef(() => TuiCalendarRange))
-    private readonly calendarRange?: TuiCalendarRange;
-
     private readonly isMobile = inject(TUI_IS_MOBILE);
     private readonly mobileCalendar = inject(TUI_MOBILE_CALENDAR, {optional: true});
     private readonly options = inject(TUI_INPUT_DATE_OPTIONS);
@@ -174,16 +166,6 @@ export class TuiInputDateRangeComponent
         }
     }
 
-    // TODO: remove this after refactor controls to hold whole TuiDayRangePeriod
-    public ngAfterViewChecked(): void {
-        if (this.calendarRange) {
-            // @ts-ignore
-            this.calendarRange.selectedActivePeriod = this.selectedActivePeriod;
-            // @ts-ignore
-            this.calendarRange.cdr.markForCheck();
-        }
-    }
-
     public onValueChange(value: string): void {
         if (this.control) {
             this.control.updateValueAndValidity({emitEvent: false});
@@ -212,8 +194,6 @@ export class TuiInputDateRangeComponent
         }
 
         this.value = range;
-        // @ts-ignore
-        this.selectedActivePeriod = this.calendarRange?.selectedActivePeriod ?? null;
     }
 
     public override writeValue(value: TuiDayRange | null): void {

diff --git a/projects/legacy/components/input-date-range/input-date-range.template.html b/projects/legacy/components/input-date-range/input-date-range.template.html
@@ -65,6 +65,7 @@
             [min]="min"
             [minLength]="minLength"
             [value]="value"
+            [(item)]="selectedActivePeriod"
             (valueChange)="onRangeChange($event)"
         />
     </ng-template>