From a0559055f97ca73ed417259a45f62fba4d5527f4 Mon Sep 17 00:00:00 2001
From: Wenqi Chen <1264578441@qq.com>
Date: Fri, 11 Dec 2020 15:16:20 +0800
Subject: [PATCH] fix(module:date-picker,time-picker): prevent losing input
 focus (#6171)

close #6170
---
 .../date-picker/date-range-popup.component.ts       | 13 ++++++++++++-
 .../time-picker/time-picker-panel.component.ts      | 11 ++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/components/date-picker/date-range-popup.component.ts b/components/date-picker/date-range-popup.component.ts
index 4a4a0b24bb3..10fcda1a304 100644
--- 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
index c3e4fa37498..afbdc693e55 100644
--- 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();
+  }
 }