fix(module:date-picker,time-picker): prevent losing input focus (#6171)

close #6170
NG-ZORRO · Dec 11, 2020 · a055905 · a055905
1 parent 375366f
commit a055905
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/components/date-picker/date-range-popup.component.ts b/components/date-picker/date-range-popup.component.ts
@@ -127,7 +127,10 @@ import { getTimeConfig, isAllowedDate, PREFIX_CLASS } from './util';
         <span class="ant-tag ant-tag-blue">{{ name }}</span>
       </li>
     </ng-template>
-  `
+  `,
+  host: {
+    '(mousedown)': 'onMousedown($event)'
+  }
 })
 export class DateRangePopupComponent implements OnInit, OnChanges, OnDestroy {
   @Input() isRange!: boolean;
@@ -202,6 +205,14 @@ export class DateRangePopupComponent implements OnInit, OnChanges, OnDestroy {
     this.updateActiveDate();
   }
 
+  /**
+   * Prevent input losing focus when click panel
+   * @param event
+   */
+  onMousedown(event: MouseEvent): void {
+    event.preventDefault();
+  }
+
   onClickOk(): void {
     const inputIndex = { left: 0, right: 1 }[this.datePickerService.activeInput];
     const value: CandyDate = this.isRange

diff --git a/components/time-picker/time-picker-panel.component.ts b/components/time-picker/time-picker-panel.component.ts
@@ -122,7 +122,8 @@ export type NzTimePickerUnit = 'hour' | 'minute' | 'second' | '12-hour';
     '[class.ant-picker-time-panel-column-2]': `enabledColumns === 2 && !nzInDatePicker`,
     '[class.ant-picker-time-panel-column-3]': `enabledColumns === 3 && !nzInDatePicker`,
     '[class.ant-picker-time-panel-narrow]': `enabledColumns < 3`,
-    '[class.ant-picker-time-panel-placement-bottomLeft]': `!nzInDatePicker`
+    '[class.ant-picker-time-panel-placement-bottomLeft]': `!nzInDatePicker`,
+    '(mousedown)': 'onMousedown($event)'
   },
   providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: NzTimePickerPanelComponent, multi: true }]
 })
@@ -566,4 +567,12 @@ export class NzTimePickerPanelComponent implements ControlValueAccessor, OnInit,
   registerOnTouched(fn: () => void): void {
     this.onTouch = fn;
   }
+
+  /**
+   * Prevent input losing focus when click panel
+   * @param event
+   */
+  onMousedown(event: MouseEvent): void {
+    event.preventDefault();
+  }
 }