fix(module:date-picker): fix datePicker can't clear (#7671)

close #7534
NG-ZORRO · Oct 13, 2022 · ba90876 · ba90876
1 parent 16e61be
commit ba90876
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/components/date-picker/date-picker.component.ts b/components/date-picker/date-picker.component.ts
@@ -801,6 +801,7 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Afte
     const newValue: CompatibleValue = this.datePickerService.makeValue(value);
     this.datePickerService.setValue(newValue);
     this.datePickerService.initialValue = newValue;
+    this.cdr.detectChanges();
   }
 
   renderClass(value: boolean): void {

diff --git a/components/date-picker/range-picker.component.spec.ts b/components/date-picker/range-picker.component.spec.ts
@@ -161,6 +161,19 @@ describe('NzRangePickerComponent', () => {
       expect(debugElement.query(clearBtnSelector)).toBeFalsy();
     }));
 
+    it('should support clear input value when set default value', fakeAsync(() => {
+      const clearBtnSelector = By.css(`.${PREFIX_CLASS}-clear`);
+      fixtureInstance.modelValue = [new Date(), new Date()];
+      fixtureInstance.nzAllowClear = true;
+      tick();
+      fixture.autoDetectChanges();
+
+      const leftInput = getPickerInput(fixture.debugElement);
+      tick(500);
+      debugElement.query(clearBtnSelector).nativeElement.click();
+      expect(leftInput.attributes.getNamedItem('ng-reflect-model')?.value).toBeUndefined();
+    }));
+
     it('should support nzAutoFocus', fakeAsync(() => {
       fixtureInstance.nzAutoFocus = true;
       fixture.detectChanges();