fix(module:date-picker): fix datePicker show multi panel

NG-ZORRO · Oct 14, 2022 · 1bee543 · 1bee543
1 parent ba90876
commit 1bee543
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/components/date-picker/date-picker.component.spec.ts b/components/date-picker/date-picker.component.spec.ts
@@ -221,6 +221,19 @@ describe('NzDatePickerComponent', () => {
       expect(getPickerContainer()).not.toBeNull();
     }));
 
+    it('should prevent default on the mousedown event when click or mouse down any place in date picker', fakeAsync(() => {
+      fixture.detectChanges();
+      openPickerByClickTrigger();
+
+      const span = fixture.nativeElement.querySelector(`.${PREFIX_CLASS}`);
+      const event = new MouseEvent('mousedown');
+
+      spyOn(event, 'preventDefault').and.callThrough();
+      span.dispatchEvent(event);
+
+      expect(event.preventDefault).toHaveBeenCalled();
+    }));
+
     it('should support nzAllowClear and work properly', fakeAsync(() => {
       const clearBtnSelector = By.css(`.${PREFIX_CLASS}-clear`);
       const initial = (fixtureInstance.nzValue = new Date());

diff --git a/components/date-picker/date-picker.component.ts b/components/date-picker/date-picker.component.ts
@@ -369,6 +369,8 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Afte
       this.focus();
       this.updateInputWidthAndArrowLeft();
     });
+
+    this.elementRef.nativeElement.addEventListener('mousedown', this.onMouseDown);
   }
 
   updateInputWidthAndArrowLeft(): void {
@@ -407,6 +409,10 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Afte
     }
   }
 
+  onMouseDown(event: Event): void {
+    event.preventDefault();
+  }
+
   onFocus(event: FocusEvent, partType?: RangePartType): void {
     event.preventDefault();
     if (partType) {
@@ -697,6 +703,7 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Afte
   ngOnDestroy(): void {
     this.destroyed$.next();
     this.destroyed$.complete();
+    this.elementRef.nativeElement.removeEventListener('mousedown', this.onMouseDown);
   }
 
   setModeAndFormat(): void {