fix(module:date-picker): time picker panel not scroll at first time (#…

…6604)
NG-ZORRO · Apr 20, 2021 · b97dfbe · b97dfbe
1 parent 3a25b04
commit b97dfbe
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 31 deletions.
diff --git a/components/date-picker/date-picker.component.spec.ts b/components/date-picker/date-picker.component.spec.ts
@@ -1072,7 +1072,7 @@ describe('NzDatePickerComponent', () => {
   }
 
   function triggerInputBlur(): void {
-    dispatchFakeEvent(getPickerInput(fixture.debugElement), 'blur');
+    dispatchFakeEvent(getPickerInput(fixture.debugElement), 'focusout');
   }
 });
 

diff --git a/components/date-picker/date-picker.component.ts b/components/date-picker/date-picker.component.ts
@@ -78,7 +78,6 @@ export type NzDatePickerSizeType = 'large' | 'default' | 'small';
       [nzId]="nzId"
     >
       <date-range-popup
-        *ngIf="picker.realOpenState || nzInline"
         [isRange]="isRange"
         [inline]="nzInline"
         [defaultPickerValue]="nzDefaultPickerValue"
@@ -210,7 +209,7 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Cont
 
     // Default value
     this.datePickerService.isRange = this.isRange;
-    this.datePickerService.initValue();
+    this.datePickerService.initValue(true);
     this.datePickerService.emitValue$.pipe(takeUntil(this.destroyed$)).subscribe(_ => {
       const value = this.datePickerService.value;
       this.datePickerService.initialValue = cloneDate(value);

diff --git a/components/date-picker/date-picker.service.ts b/components/date-picker/date-picker.service.ts
@@ -10,7 +10,7 @@ import { CompatibleDate, NzDateMode, RangePartType } from './standard-types';
 
 @Injectable()
 export class DatePickerService implements OnDestroy {
-  initialValue?: CompatibleValue;
+  initialValue!: CompatibleValue;
   value!: CompatibleValue;
   activeDate?: CompatibleValue;
   activeInput: RangePartType = 'left';
@@ -21,12 +21,11 @@ export class DatePickerService implements OnDestroy {
   emitValue$ = new Subject<void>();
   inputPartChange$ = new Subject<RangePartType>();
 
-  initValue(): void {
-    if (this.isRange) {
-      this.initialValue = [];
-    } else {
-      this.initialValue = null;
+  initValue(reset: boolean = false): void {
+    if (reset) {
+      this.initialValue = this.isRange ? [] : null;
     }
+
     this.setValue(this.initialValue);
   }
 

diff --git a/components/date-picker/date-range-popup.component.ts b/components/date-picker/date-range-popup.component.ts
@@ -22,7 +22,7 @@ import { Direction } from '@angular/cdk/bidi';
 import { CandyDate, cloneDate, CompatibleValue, NormalizedMode, SingleValue, wrongSortOrder } from 'ng-zorro-antd/core/time';
 import { FunctionProp } from 'ng-zorro-antd/core/types';
 import { NzCalendarI18nInterface } from 'ng-zorro-antd/i18n';
-import { Subject } from 'rxjs';
+import { merge, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { DatePickerService } from './date-picker.service';
 import {
@@ -49,8 +49,13 @@ import { getTimeConfig, isAllowedDate, PREFIX_CLASS } from './util';
         <div class="{{ prefixCls }}-range-arrow" [style.left.px]="datePickerService?.arrowLeft"></div>
         <div class="{{ prefixCls }}-panel-container">
           <div class="{{ prefixCls }}-panels">
-            <ng-container *ngTemplateOutlet="tplInnerPopup; context: { partType: 'left' }"></ng-container>
-            <ng-container *ngTemplateOutlet="tplInnerPopup; context: { partType: 'right' }"></ng-container>
+            <ng-container *ngIf="hasTimePicker; else noTimePicker">
+              <ng-container *ngTemplateOutlet="tplInnerPopup; context: { partType: datePickerService.activeInput }"></ng-container>
+            </ng-container>
+            <ng-template #noTimePicker>
+              <ng-container *ngTemplateOutlet="tplInnerPopup; context: { partType: 'left' }"></ng-container>
+              <ng-container *ngTemplateOutlet="tplInnerPopup; context: { partType: 'right' }"></ng-container>
+            </ng-template>
           </div>
           <ng-container *ngTemplateOutlet="tplFooter"></ng-container>
         </div>
@@ -71,7 +76,7 @@ import { getTimeConfig, isAllowedDate, PREFIX_CLASS } from './util';
     </ng-template>
 
     <ng-template #tplInnerPopup let-partType="partType">
-      <div class="{{ prefixCls }}-panel" [class.ant-picker-panel-rtl]="dir === 'rtl'" [style.display]="show(partType) ? 'block' : 'none'">
+      <div class="{{ prefixCls }}-panel" [class.ant-picker-panel-rtl]="dir === 'rtl'">
         <!-- TODO(@wenqi73) [selectedValue] [hoverValue] types-->
         <inner-popup
           [showWeek]="showWeek"
@@ -144,10 +149,11 @@ export class DateRangePopupComponent implements OnInit, OnChanges, OnDestroy {
   @Input() dateRender?: string | TemplateRef<Date> | FunctionProp<TemplateRef<Date> | string>;
   @Input() panelMode!: NzDateMode | NzDateMode[];
   @Input() defaultPickerValue!: CompatibleDate | undefined | null;
+  @Input() dir: Direction = 'ltr';
+
   @Output() readonly panelModeChange = new EventEmitter<NzDateMode | NzDateMode[]>();
   @Output() readonly calendarChange = new EventEmitter<CompatibleValue>();
   @Output() readonly resultOk = new EventEmitter<void>(); // Emitted when done with date selecting
-  @Input() dir: Direction = 'ltr';
 
   prefixCls: string = PREFIX_CLASS;
   endPanelMode: NzDateMode | NzDateMode[] = 'date';
@@ -167,10 +173,12 @@ export class DateRangePopupComponent implements OnInit, OnChanges, OnDestroy {
   constructor(public datePickerService: DatePickerService, public cdr: ChangeDetectorRef) {}
 
   ngOnInit(): void {
-    this.datePickerService.valueChange$.pipe(takeUntil(this.destroy$)).subscribe(() => {
-      this.updateActiveDate();
-      this.cdr.markForCheck();
-    });
+    merge(this.datePickerService.valueChange$, this.datePickerService.inputPartChange$)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => {
+        this.updateActiveDate();
+        this.cdr.markForCheck();
+      });
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -203,6 +211,8 @@ export class DateRangePopupComponent implements OnInit, OnChanges, OnDestroy {
   init(): void {
     this.checkedPartArr = [false, false];
     this.updateActiveDate();
+    // trigger timepicker to reset
+    this.datePickerService.setValue(cloneDate(this.datePickerService.value));
   }
 
   /**

diff --git a/components/date-picker/month-picker.component.spec.ts b/components/date-picker/month-picker.component.spec.ts
@@ -56,7 +56,7 @@ describe('NzMonthPickerComponent', () => {
       openPickerByClickTrigger();
       expect(getPickerContainer()).not.toBeNull();
 
-      dispatchFakeEvent(getPickerInput(fixture.debugElement), 'blur');
+      dispatchFakeEvent(getPickerInput(fixture.debugElement), 'focusout');
       fixture.detectChanges();
       tick(500);
       fixture.detectChanges();
@@ -205,7 +205,7 @@ describe('NzMonthPickerComponent', () => {
       openPickerByClickTrigger();
       expect(nzOnOpenChange).toHaveBeenCalledWith(true);
 
-      dispatchFakeEvent(getPickerInput(fixture.debugElement), 'blur');
+      dispatchFakeEvent(getPickerInput(fixture.debugElement), 'focusout');
       fixture.detectChanges();
       flush();
       expect(nzOnOpenChange).toHaveBeenCalledWith(false);

diff --git a/components/date-picker/picker.component.ts b/components/date-picker/picker.component.ts
@@ -67,7 +67,7 @@ import { PREFIX_CLASS } from './util';
           placeholder="{{ getPlaceholder() }}"
           [size]="inputSize"
           (focus)="onFocus($event)"
-          (blur)="onBlur($event)"
+          (focusout)="onFocusout($event)"
           (ngModelChange)="onInputChange($event)"
           (keyup.enter)="onKeyupEnter($event)"
         />
@@ -101,7 +101,7 @@ import { PREFIX_CLASS } from './util';
         [readOnly]="inputReadOnly"
         [size]="inputSize"
         (click)="onClickInputBox($event)"
-        (blur)="onBlur($event)"
+        (focusout)="onFocusout($event)"
         (focus)="onFocus($event, partType)"
         (keyup.enter)="onKeyupEnter($event)"
         [(ngModel)]="inputValue[datePickerService.getActiveIndex(partType)]"
@@ -282,7 +282,6 @@ export class NzPickerComponent implements OnInit, AfterViewInit, OnChanges, OnDe
       }
       this.focus();
       this.updateInputWidthAndArrowLeft();
-      this.panel?.updateActiveDate();
     });
   }
 
@@ -340,7 +339,8 @@ export class NzPickerComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     }
   }
 
-  onBlur(event: FocusEvent): void {
+  // blur event has not the relatedTarget in IE11, use focusout instead.
+  onFocusout(event: FocusEvent): void {
     event.preventDefault();
     this.focusChange.emit(false);
 
@@ -358,6 +358,7 @@ export class NzPickerComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     if (!this.realOpenState && !this.disabled) {
       this.updateInputWidthAndArrowLeft();
       this.overlayOpen = true;
+      this.panel.init();
       this.focus();
       this.openChange.emit(true);
       this.cdr.markForCheck();
@@ -412,7 +413,7 @@ export class NzPickerComponent implements OnInit, AfterViewInit, OnChanges, OnDe
 
   onOverlayKeydown(event: KeyboardEvent): void {
     if (event.keyCode === ESCAPE) {
-      this.datePickerService.setValue(this.datePickerService.initialValue!);
+      this.datePickerService.initValue();
     }
   }
 
@@ -450,7 +451,7 @@ export class NzPickerComponent implements OnInit, AfterViewInit, OnChanges, OnDe
 
   onInputChange(value: string, isEnter: boolean = false): void {
     /**
-     * in IE11 focus/blur will trigger ngModelChange if has placeholder
+     * in IE11 focus/blur will trigger ngModelChange if placeholder changes,
      * so we forbidden IE11 to open panel through input change
      */
     if (
@@ -463,7 +464,8 @@ export class NzPickerComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     }
 
     const date = this.checkValidDate(value);
-    if (date) {
+    // Can only change date when it's open
+    if (date && this.realOpenState) {
       this.panel.changeValueFromSelect(date, isEnter);
     }
   }

diff --git a/components/date-picker/range-picker.component.spec.ts b/components/date-picker/range-picker.component.spec.ts
@@ -1017,9 +1017,9 @@ describe('NzRangePickerComponent', () => {
 
   function triggerInputBlur(part: 'left' | 'right' = 'left'): void {
     if (part === 'left') {
-      dispatchFakeEvent(getPickerInput(fixture.debugElement), 'blur');
+      dispatchFakeEvent(getPickerInput(fixture.debugElement), 'focusout');
     } else {
-      dispatchFakeEvent(getRangePickerRightInput(fixture.debugElement), 'blur');
+      dispatchFakeEvent(getRangePickerRightInput(fixture.debugElement), 'focusout');
     }
   }
 });

diff --git a/components/date-picker/year-picker.component.spec.ts b/components/date-picker/year-picker.component.spec.ts
@@ -51,7 +51,7 @@ describe('NzYearPickerComponent', () => {
       openPickerByClickTrigger();
       expect(getPickerContainer()).not.toBeNull();
 
-      dispatchFakeEvent(getPickerInput(fixture.debugElement), 'blur');
+      dispatchFakeEvent(getPickerInput(fixture.debugElement), 'focusout');
       fixture.detectChanges();
       tick(500);
       fixture.detectChanges();
@@ -197,7 +197,7 @@ describe('NzYearPickerComponent', () => {
       openPickerByClickTrigger();
       expect(nzOnOpenChange).toHaveBeenCalledWith(true);
 
-      dispatchFakeEvent(getPickerInput(fixture.debugElement), 'blur');
+      dispatchFakeEvent(getPickerInput(fixture.debugElement), 'focusout');
       fixture.detectChanges();
       flush();
       expect(nzOnOpenChange).toHaveBeenCalledWith(false);