fix(module:date-picker): open the panel wrongly in IE11 (#5643)

close #5562
NG-ZORRO · Sep 10, 2020 · 0649ceb · 0649ceb
1 parent 4cc14ba
commit 0649ceb
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 34 deletions.
diff --git a/components/date-picker/date-picker.component.spec.ts b/components/date-picker/date-picker.component.spec.ts
@@ -16,7 +16,7 @@ import { NgStyleInterface } from 'ng-zorro-antd/core/types';
 import { NzI18nModule, NzI18nService, NZ_DATE_LOCALE } from 'ng-zorro-antd/i18n';
 import en_US from '../i18n/languages/en_US';
 import { NzDatePickerModule } from './date-picker.module';
-import { getPicker, getPickerAbstract, getPickerInput } from './testing/util';
+import { ENTER_EVENT, getPicker, getPickerAbstract, getPickerInput } from './testing/util';
 import { PREFIX_CLASS } from './util';
 
 registerLocaleData(zh);
@@ -85,7 +85,7 @@ describe('NzDatePickerComponent', () => {
 
     it('should open on enter', fakeAsync(() => {
       fixture.detectChanges();
-      getPickerInput(fixture.debugElement).dispatchEvent(new KeyboardEvent('keyup', { key: 'enter' }));
+      getPickerInput(fixture.debugElement).dispatchEvent(ENTER_EVENT);
       fixture.detectChanges();
       tick(500);
       fixture.detectChanges();
@@ -103,7 +103,7 @@ describe('NzDatePickerComponent', () => {
       fixture.detectChanges();
       openPickerByClickTrigger();
       expect(document.activeElement).toEqual(getPickerInput(fixture.debugElement));
-      getPickerInput(fixture.debugElement).dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
+      getPickerInput(fixture.debugElement).dispatchEvent(ENTER_EVENT);
       fixture.detectChanges();
       tick(500);
       fixture.detectChanges();
@@ -116,7 +116,7 @@ describe('NzDatePickerComponent', () => {
       const input = getPickerInput(fixture.debugElement) as HTMLInputElement;
       input.value = 'invalid input';
       fixture.detectChanges();
-      input.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
+      input.dispatchEvent(ENTER_EVENT);
       fixture.detectChanges();
       tick(500);
       fixture.detectChanges();
@@ -264,7 +264,7 @@ describe('NzDatePickerComponent', () => {
       const submit = (date: string) => {
         input.value = date;
         fixture.detectChanges();
-        input.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
+        input.dispatchEvent(ENTER_EVENT);
         fixture.detectChanges();
         tick(500);
         fixture.detectChanges();
@@ -733,7 +733,7 @@ describe('NzDatePickerComponent', () => {
       const input = getPickerInput(fixture.debugElement);
       typeInElement('2020-03-14 00:00:00', input);
       fixture.detectChanges();
-      input.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
+      input.dispatchEvent(ENTER_EVENT);
       fixture.detectChanges();
       tick(500);
       fixture.detectChanges();
@@ -830,7 +830,7 @@ describe('NzDatePickerComponent', () => {
 
       // Correct inputing
       input.value = '2018-11-22';
-      input.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
+      input.dispatchEvent(ENTER_EVENT);
       // dispatchKeyboardEvent(input, 'keyup', ENTER); // Not working?
       fixture.detectChanges();
       flush();
@@ -952,7 +952,7 @@ describe('date-fns testing', () => {
     const input = getPickerInput(fixture.debugElement);
     typeInElement('25.10.2019', input);
     fixture.detectChanges();
-    input.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
+    input.dispatchEvent(ENTER_EVENT);
     fixture.detectChanges();
     flush();
     const result = (nzOnChange.calls.allArgs()[0] as Date[])[0];

diff --git a/components/date-picker/month-picker.component.spec.ts b/components/date-picker/month-picker.component.spec.ts
@@ -10,7 +10,7 @@ import isBefore from 'date-fns/isBefore';
 
 import { dispatchMouseEvent } from 'ng-zorro-antd/core/testing';
 import { NgStyleInterface } from 'ng-zorro-antd/core/types';
-import { getPicker, getPickerAbstract, getPickerInput } from 'ng-zorro-antd/date-picker/testing/util';
+import { ENTER_EVENT, getPicker, getPickerAbstract, getPickerInput } from 'ng-zorro-antd/date-picker/testing/util';
 import { PREFIX_CLASS } from 'ng-zorro-antd/date-picker/util';
 import { NzInputModule } from 'ng-zorro-antd/input';
 
@@ -65,7 +65,7 @@ describe('NzMonthPickerComponent', () => {
 
     it('should open on enter', fakeAsync(() => {
       fixture.detectChanges();
-      getPickerInput(fixture.debugElement).dispatchEvent(new KeyboardEvent('keyup', { key: 'enter' }));
+      getPickerInput(fixture.debugElement).dispatchEvent(ENTER_EVENT);
       fixture.detectChanges();
       tick(500);
       fixture.detectChanges();

diff --git a/components/date-picker/picker.component.ts b/components/date-picker/picker.component.ts
@@ -63,8 +63,8 @@ import { PREFIX_CLASS } from './util';
         [size]="inputSize"
         (focus)="onFocus()"
         (blur)="onBlur()"
-        (input)="onInputKeyup($event)"
-        (keyup.enter)="onInputKeyup($event, true)"
+        (ngModelChange)="onInputChange($event)"
+        (keyup.enter)="onKeyupEnter($event)"
       />
       <ng-container *ngTemplateOutlet="tplRightRest"></ng-container>
     </div>
@@ -96,10 +96,10 @@ import { PREFIX_CLASS } from './util';
         [size]="inputSize"
         (click)="onClickInputBox($event, partType)"
         (blur)="onBlur()"
-        (input)="onInputKeyup($event)"
         (focus)="onFocus(partType)"
-        (keyup.enter)="onInputKeyup($event, true)"
+        (keyup.enter)="onKeyupEnter($event)"
         [(ngModel)]="inputValue[datePickerService.getActiveIndex(partType)]"
+        (ngModelChange)="onInputChange($event)"
         placeholder="{{ getPlaceholder(partType) }}"
       />
     </ng-template>
@@ -343,7 +343,6 @@ export class NzPickerComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     if (this.realOpenState) {
       this.overlayOpen = false;
       this.openChange.emit(false);
-      this.focus();
     }
   }
 
@@ -411,22 +410,23 @@ export class NzPickerComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     return this.dateHelper.format(value && (value as CandyDate).nativeDate, this.format);
   }
 
-  onInputKeyup(event: Event, emitValue: boolean = false): void {
-    if (!this.realOpenState) {
-      this.showOverlay();
-      return;
-    }
-    const date = this.checkValidInputDate((event as KeyboardEvent).target!);
+  onInputChange(value: string, isEnter: boolean = false): void {
+    this.showOverlay();
+
+    const date = this.checkValidDate(value);
     if (this.panel && date) {
-      this.panel.changeValueFromSelect(date, emitValue);
+      this.panel.changeValueFromSelect(date, isEnter);
     }
   }
 
-  private checkValidInputDate(inputTarget: EventTarget): CandyDate | null {
-    const input = (inputTarget as HTMLInputElement).value;
-    const date = new CandyDate(this.dateHelper.parseDate(input, this.format));
+  onKeyupEnter(event: Event): void {
+    this.onInputChange((event.target as HTMLInputElement).value, true);
+  }
+
+  private checkValidDate(value: string): CandyDate | null {
+    const date = new CandyDate(this.dateHelper.parseDate(value, this.format));
 
-    if (!date.isValid() || input !== this.dateHelper.format(date.nativeDate, this.format)) {
+    if (!date.isValid() || value !== this.dateHelper.format(date.nativeDate, this.format)) {
       return null;
     }
 

diff --git a/components/date-picker/range-picker.component.spec.ts b/components/date-picker/range-picker.component.spec.ts
@@ -14,7 +14,13 @@ import { dispatchKeyboardEvent, dispatchMouseEvent, typeInElement } from 'ng-zor
 import { CandyDate } from 'ng-zorro-antd/core/time';
 import { NgStyleInterface } from 'ng-zorro-antd/core/types';
 import { RangePartType } from 'ng-zorro-antd/date-picker/standard-types';
-import { getPicker, getPickerAbstract, getPickerInput, getRangePickerRightInput } from 'ng-zorro-antd/date-picker/testing/util';
+import {
+  ENTER_EVENT,
+  getPicker,
+  getPickerAbstract,
+  getPickerInput,
+  getRangePickerRightInput
+} from 'ng-zorro-antd/date-picker/testing/util';
 import { PREFIX_CLASS } from 'ng-zorro-antd/date-picker/util';
 import { NzDatePickerModule } from './date-picker.module';
 
@@ -80,7 +86,7 @@ describe('NzRangePickerComponent', () => {
 
     it('should open on enter', fakeAsync(() => {
       fixture.detectChanges();
-      getPickerInput(fixture.debugElement).dispatchEvent(new KeyboardEvent('keyup', { key: 'enter' }));
+      getPickerInput(fixture.debugElement).dispatchEvent(ENTER_EVENT);
       fixture.detectChanges();
       tick(500);
       fixture.detectChanges();
@@ -710,12 +716,12 @@ describe('NzRangePickerComponent', () => {
       fixture.detectChanges();
 
       // should focus the other input
-      leftInput.dispatchEvent(new KeyboardEvent('keyup', { key: 'enter' }));
+      leftInput.dispatchEvent(ENTER_EVENT);
       fixture.detectChanges();
       expect(getRangePickerRightInput(fixture.debugElement) === document.activeElement).toBeTruthy();
 
       typeInElement('2018-12-12', rightInput);
-      rightInput.dispatchEvent(new KeyboardEvent('keyup', { key: 'enter' }));
+      rightInput.dispatchEvent(ENTER_EVENT);
       fixture.detectChanges();
       tick(500);
       fixture.detectChanges();
@@ -741,7 +747,7 @@ describe('NzRangePickerComponent', () => {
       fixture.detectChanges();
       typeInElement(newDateString[1], rightInput);
       fixture.detectChanges();
-      rightInput.dispatchEvent(new KeyboardEvent('keyup', { key: 'enter' }));
+      rightInput.dispatchEvent(ENTER_EVENT);
       fixture.detectChanges();
       tick(500);
       expect(nzOnChange).toHaveBeenCalledWith([new Date(newDateString[0]), new Date(newDateString[1])]);
@@ -781,7 +787,7 @@ describe('NzRangePickerComponent', () => {
       fixture.detectChanges();
       typeInElement('2018-02-06', rightInput);
       fixture.detectChanges();
-      getPickerInput(fixture.debugElement).dispatchEvent(new KeyboardEvent('keyup', { key: 'enter' }));
+      getPickerInput(fixture.debugElement).dispatchEvent(ENTER_EVENT);
       fixture.detectChanges();
       flush();
       fixture.detectChanges();

diff --git a/components/date-picker/testing/util.ts b/components/date-picker/testing/util.ts
@@ -8,6 +8,8 @@ import { By } from '@angular/platform-browser';
 import { NzPickerComponent } from '../picker.component';
 import { PREFIX_CLASS } from '../util';
 
+export const ENTER_EVENT = new KeyboardEvent('keyup', { key: 'Enter' });
+
 export function getPickerAbstract<T = HTMLElement>(debugElement: DebugElement): T {
   return debugElement.query(By.css(`.${PREFIX_CLASS}`)).nativeElement;
 }

diff --git a/components/date-picker/year-picker.component.spec.ts b/components/date-picker/year-picker.component.spec.ts
@@ -7,7 +7,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { dispatchMouseEvent } from 'ng-zorro-antd/core/testing';
 import { NgStyleInterface } from 'ng-zorro-antd/core/types';
-import { getPicker, getPickerAbstract, getPickerInput } from 'ng-zorro-antd/date-picker/testing/util';
+import { ENTER_EVENT, getPicker, getPickerAbstract, getPickerInput } from 'ng-zorro-antd/date-picker/testing/util';
 import { PREFIX_CLASS } from 'ng-zorro-antd/date-picker/util';
 import { NzInputModule } from 'ng-zorro-antd/input';
 
@@ -60,7 +60,7 @@ describe('NzYearPickerComponent', () => {
 
     it('should open on enter', fakeAsync(() => {
       fixture.detectChanges();
-      getPickerInput(fixture.debugElement).dispatchEvent(new KeyboardEvent('keyup', { key: 'enter' }));
+      getPickerInput(fixture.debugElement).dispatchEvent(ENTER_EVENT);
       fixture.detectChanges();
       tick(500);
       fixture.detectChanges();