fix(components): [time-picker] avoid update initial value when using disabledHours & isRange (#17813)

* fix(components): [time-picker] fix wrong trigger

* fix(components): [time-picker] add test for time-picker

* fix(components): [time-picker] add a test for time-picker

* fix(components): [time-picker] add test for time-picker

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

@@ -128,6 +128,7 @@ describe('TimePicker', () => {
     input.trigger('focus')
     await nextTick()
     ;(document.querySelector('.el-time-panel__btn.confirm') as any).click()
+
     expect(value.value).toBeInstanceOf(Date)
   })
 
@@ -869,4 +870,68 @@ describe('TimePicker(range)', () => {
     expect(startInput.element.value).toBe('')
     expect(endInput.element.value).toBe('')
   })
+
+  it('avoid update initial value when using disabledHours', async () => {
+    const value = ref([])
+
+    const disabledHours = () => {
+      const curH = dayjs().hour()
+      if (curH === 0) {
+        return [curH, 1]
+      } else if (curH === 23) {
+        return [curH - 1, curH]
+      }
+      return [curH - 1, curH + 1]
+    }
+    const wrapper = mount(() => (
+      <TimePicker
+        v-model={value.value}
+        disabled-hours={disabledHours}
+        is-range={true}
+      />
+    ))
+    await nextTick()
+
+    const [startInput, endInput] = wrapper.findAll('input')
+
+    expect(startInput.element.value).toBe('')
+    expect(endInput.element.value).toBe('')
+    expect(value.value).toEqual([])
+  })
+
+  it('can clear when using disabledHours', async () => {
+    const value = ref([
+      new Date(2016, 9, 10, 9, 40),
+      new Date(2016, 9, 10, 15, 40),
+    ])
+
+    const disabledHours = () => {
+      const curH = dayjs().hour()
+      if (curH === 0) {
+        return [curH, 1]
+      } else if (curH === 23) {
+        return [curH - 1, curH]
+      }
+      return [curH - 1, curH + 1]
+    }
+    const wrapper = mount(() => (
+      <TimePicker
+        v-model={value.value}
+        disabled-hours={disabledHours}
+        is-range={true}
+      />
+    ))
+
+    await nextTick()
+    const findInputWrapper = () => wrapper.find('.el-date-editor')
+    const findClear = () => wrapper.find('.el-range__close-icon')
+
+    await nextTick()
+    const inputWrapper = findInputWrapper()
+    await inputWrapper.trigger('mouseenter')
+    const clearIcon = findClear()
+    await clearIcon.trigger('click')
+    await nextTick()
+    expect(value.value).toEqual(null)
+  })
 })

packages/components/time-picker/src/common/picker.vue

@@ -453,11 +453,15 @@ const parsedValue = computed(() => {
     )
     if (!isEqual(availableResult, dayOrDays!)) {
       dayOrDays = availableResult
-      emitInput(
-        (isArray(dayOrDays)
-          ? dayOrDays.map((_) => _.toDate())
-          : dayOrDays.toDate()) as SingleOrRange<Date>
-      )
+
+      // The result is corrected only when model-value exists
+      if (!valueIsEmpty.value) {
+        emitInput(
+          (isArray(dayOrDays)
+            ? dayOrDays.map((_) => _.toDate())
+            : dayOrDays.toDate()) as SingleOrRange<Date>
+        )
+      }
     }
   }
   if (isArray(dayOrDays!) && dayOrDays.some((day) => !day)) {