diff --git a/components/date-picker/date-picker.component.spec.ts b/components/date-picker/date-picker.component.spec.ts index d2396a09fa2..bcb5051c91e 100644 --- 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 index 6098f9a19ef..5e7452d1bdb 100644 --- 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 {