From afaa70d293ee4661e614da414b2adc21d9e8a2bd Mon Sep 17 00:00:00 2001
From: zz <2418184580@qq.com>
Date: Thu, 21 Jul 2022 12:12:32 +0800
Subject: [PATCH] fix(components): [date-picker] prevent duplicate pick date
 (#8588)

* fix(components): [date-picker] prevent duplicate pick

* refactor: mousedown instead of  click

* chore: fix test

* chore: update

* chore: update
---
 .../src/date-picker-com/basic-date-table.vue  | 33 +++++++++++++++----
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/packages/components/date-picker/src/date-picker-com/basic-date-table.vue b/packages/components/date-picker/src/date-picker-com/basic-date-table.vue
index 709bb2f2ce..b80ab66d51 100644
--- a/packages/components/date-picker/src/date-picker-com/basic-date-table.vue
+++ b/packages/components/date-picker/src/date-picker-com/basic-date-table.vue
@@ -7,6 +7,8 @@
     :class="[ns.b(), { 'is-week-mode': selectionMode === 'week' }]"
     @click="handlePickDate"
     @mousemove="handleMouseMove"
+    @mousedown="handleMouseDown"
+    @mouseup="handleMouseUp"
   >
     <tbody ref="tbodyRef">
       <tr>
@@ -28,7 +30,7 @@
         <td
           v-for="(cell, columnKey) in row"
           :key="`${rowKey}.${columnKey}`"
-          :ref="(el) => { isSelectedCell(cell) && (currentCellRef = el as HTMLElement) }"
+          :ref="(el) => isSelectedCell(cell) && (currentCellRef = el as HTMLElement)"
           :class="getCellClasses(cell)"
           :aria-current="cell.isCurrent ? 'date' : undefined"
           :aria-selected="cell.isCurrent"
@@ -68,6 +70,8 @@ const lastRow = ref<number>()
 const lastColumn = ref<number>()
 const tableRows = ref<DateCell[][]>([[], [], [], [], [], []])
 
+let focusWithClick = false
+
 // todo better way to get Day.js locale object
 const firstDayOfWeek = (props.date as any).$locale().weekStart || 7
 const WEEKS_CONSTANT = props.date
@@ -365,16 +369,31 @@ const isSelectedCell = (cell: DateCell) => {
   )
 }
 
-const handleFocus = (event: Event) => {
-  if (!hasCurrent.value && props.selectionMode === 'date') {
-    handlePickDate(event, true)
-  }
+const handleFocus = (event: FocusEvent) => {
+  if (focusWithClick || hasCurrent.value || props.selectionMode !== 'date')
+    return
+  handlePickDate(event, true)
 }
 
-const handlePickDate = (event: Event, isKeyboardMovement = false) => {
+const handleMouseDown = (event: MouseEvent) => {
+  const target = (event.target as HTMLElement).closest('td')
+  if (!target) return
+  focusWithClick = true
+}
+
+const handleMouseUp = (event: MouseEvent) => {
+  const target = (event.target as HTMLElement).closest('td')
+  if (!target) return
+  focusWithClick = false
+}
+
+const handlePickDate = (
+  event: FocusEvent | MouseEvent,
+  isKeyboardMovement = false
+) => {
   const target = (event.target as HTMLElement).closest('td')
 
-  if (!target || target.tagName !== 'TD') return
+  if (!target) return
 
   const row = (target.parentNode as HTMLTableRowElement).rowIndex - 1
   const column = (target as HTMLTableCellElement).cellIndex