fix(components): fix the attribute conflict (#13504)

* fix(components): fix the attribute conflict

When value is input by shortcut, it's value will not be changed by defaultTime anymore

closed #13483

* fix(components): change param to pass the test

* fix(components): delete unnecessary changes

* fix(components): use let to replace ref variable

* fix(components): add test cases

packages/components/date-picker/__tests__/date-picker.test.ts

@@ -1560,4 +1560,34 @@ describe('MonthRange', () => {
     await nextTick()
     expect(pickHandler).toHaveBeenCalledTimes(1)
   })
+
+  it('prop defaultTime should not confilt with prop shortcuts', async () => {
+    const wrapper = _mount(
+      `<el-date-picker
+          v-model="value"
+          type="datetime"
+          :shortcuts="[
+                { text: '12:00', value: new Date(2023, 0, 1, 12) }
+              , { text: '13:00', value: new Date(2023, 0, 1, 13) }
+              , { text: '14:00', value: new Date(2023, 0, 1, 14) }
+            ]"
+          :defaultTime="new Date(2023, 0, 1, 19, 0, 0)"
+        />`,
+      () => ({ value: '' })
+    )
+    const input = wrapper.find('input')
+    input.trigger('blur')
+    input.trigger('focus')
+    await nextTick()
+    document
+      .querySelector('.el-picker-panel__sidebar .el-picker-panel__shortcut')
+      .click()
+    await nextTick()
+    const vm = wrapper.vm as any
+    expect(vm.value).toBeDefined()
+    expect(vm.value.getFullYear()).toBe(2023)
+    expect(vm.value.getMonth()).toBe(0)
+    expect(vm.value.getDate()).toBe(1)
+    expect(vm.value.getHours()).toBe(12)
+  })
 })

packages/components/date-picker/__tests__/date-time-picker.test.tsx

@@ -773,4 +773,34 @@ describe('Datetimerange', () => {
     expect(startInput.element.value).toBe('')
     expect(endInput.element.value).toBe('')
   })
+
+  it('prop defaultTime should not confilt with prop shortcuts', async () => {
+    const value = ref('')
+    const wrapper = _mount(() => (
+      <DatePicker
+        v-model={value.value}
+        type="datetime"
+        shortcuts={[
+          { text: '12:00', value: new Date(2023, 0, 1, 12) },
+          { text: '13:00', value: new Date(2023, 0, 1, 13) },
+          { text: '14:00', value: new Date(2023, 0, 1, 14) },
+        ]}
+        default-time={new Date(2023, 0, 1, 19, 0, 0)}
+      />
+    ))
+    const input = wrapper.find('input')
+    input.trigger('blur')
+    input.trigger('focus')
+    await nextTick()
+    ;(
+      document.querySelector(
+        '.el-picker-panel__sidebar .el-picker-panel__shortcut'
+      ) as HTMLElement
+    ).click()
+    await nextTick()
+    expect(value.value).toBeDefined()
+    expect(dayjs(value.value).format('YYYY-MM-DD HH:mm:ss')).toStrictEqual(
+      '2023-01-01 12:00:00'
+    )
+  })
 })

packages/components/date-picker/src/date-picker-com/panel-date-pick.vue

@@ -253,6 +253,8 @@ const innerDate = ref(dayjs().locale(lang.value))
 
 const isChangeToNow = ref(false)
 
+let isShortcut = false
+
 const defaultTimeD = computed(() => {
   return dayjs(defaultTime).locale(lang.value)
 })
@@ -275,7 +277,12 @@ const checkDateWithinRange = (date: ConfigType) => {
     : true
 }
 const formatEmit = (emitDayjs: Dayjs) => {
-  if (defaultTime && !visibleTime.value && !isChangeToNow.value) {
+  if (
+    defaultTime &&
+    !visibleTime.value &&
+    !isChangeToNow.value &&
+    !isShortcut
+  ) {
     return defaultTimeD.value
       .year(emitDayjs.year())
       .month(emitDayjs.month())
@@ -296,6 +303,7 @@ const emit = (value: Dayjs | Dayjs[], ...args: any[]) => {
   userInputDate.value = null
   userInputTime.value = null
   isChangeToNow.value = false
+  isShortcut = false
 }
 const handleDatePick = (value: DateTableEmits, keepOpen?: boolean) => {
   if (selectionMode.value === 'date') {
@@ -366,6 +374,7 @@ const handleShortcutClick = (shortcut: Shortcut) => {
     ? shortcut.value()
     : shortcut.value
   if (shortcutValue) {
+    isShortcut = true
     emit(dayjs(shortcutValue).locale(lang.value))
     return
   }