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

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