Skip to content

Commit

Permalink
fix(module:date-picker): fix datePicker show multi panel (#7680)
Browse files Browse the repository at this point in the history
close #7450
  • Loading branch information
luckyship authored Oct 17, 2022
1 parent 1a16154 commit ee4872e
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 0 deletions.
22 changes: 22 additions & 0 deletions components/date-picker/date-picker.component.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -221,6 +221,28 @@ describe('NzDatePickerComponent', () => {
expect(getPickerContainer()).not.toBeNull();
}));

it('should prevent default on the mousedown event when mouse down in date picker', fakeAsync(() => {
fixture.detectChanges();
openPickerByClickTrigger();

const event = new MouseEvent('mousedown');
spyOn(event, 'preventDefault').and.callThrough();
fixture.nativeElement.querySelector(`.${PREFIX_CLASS}`).dispatchEvent(event);

expect(event.preventDefault).toHaveBeenCalled();
}));

it('should execute default on the mousedown event when mouse down in date picker input', fakeAsync(() => {
fixture.detectChanges();
openPickerByClickTrigger();

const event = new MouseEvent('mousedown');
spyOn(event, 'preventDefault').and.callThrough();
fixture.nativeElement.querySelector(`.${PREFIX_CLASS} input`).dispatchEvent(event);

expect(event.preventDefault).not.toHaveBeenCalled();
}));

it('should support nzAllowClear and work properly', fakeAsync(() => {
const clearBtnSelector = By.css(`.${PREFIX_CLASS}-clear`);
const initial = (fixtureInstance.nzValue = new Date());
Expand Down
11 changes: 11 additions & 0 deletions components/date-picker/date-picker.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -369,6 +369,10 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Afte
this.focus();
this.updateInputWidthAndArrowLeft();
});

// prevent mousedown event to trigger focusout event when click in date picker
// see: https://github.com/NG-ZORRO/ng-zorro-antd/issues/7450
this.elementRef.nativeElement.addEventListener('mousedown', this.onMouseDown);
}

updateInputWidthAndArrowLeft(): void {
Expand Down Expand Up @@ -407,6 +411,12 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Afte
}
}

onMouseDown(event: Event): void {
if ((event.target as HTMLInputElement).tagName.toLowerCase() !== 'input') {
event.preventDefault();
}
}

onFocus(event: FocusEvent, partType?: RangePartType): void {
event.preventDefault();
if (partType) {
Expand Down Expand Up @@ -697,6 +707,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 {
Expand Down
11 changes: 11 additions & 0 deletions components/date-picker/range-picker.component.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,17 @@ describe('NzRangePickerComponent', () => {
expect(getPickerContainer()).not.toBeNull();
}));

it('should execute default on the mousedown event when mouse down in date picker input', fakeAsync(() => {
fixture.detectChanges();
openPickerByClickTrigger();

const event = new MouseEvent('mousedown');
spyOn(event, 'preventDefault').and.callThrough();
fixture.nativeElement.querySelector(`.${PREFIX_CLASS}-separator`).dispatchEvent(event);

expect(event.preventDefault).not.toHaveBeenCalled();
}));

it('should support nzAllowClear and work properly', fakeAsync(() => {
const clearBtnSelector = By.css(`.${PREFIX_CLASS}-clear`);
const initial = (fixtureInstance.modelValue = [new Date(), new Date()]);
Expand Down

0 comments on commit ee4872e

Please sign in to comment.