fix(time-picker): update oldValue when visible change (#1635)

* fix(time-picker): update oldValue when visible change

* chore(time-picker): extract common logic

packages/time-picker/__tests__/time-picker.spec.ts

@@ -128,6 +128,49 @@ describe('TimePicker', () => {
     expect(vm.value instanceof Date).toBeTruthy()
   })
 
+  it('should update oldValue when visible change', async () => {
+    const wrapper = _mount(`<el-time-picker
+        v-model="value"
+      />`, () => ({ value: new Date(2016, 9, 10, 18, 40) }))
+
+    // show picker panel
+    const input = wrapper.find('input')
+    input.trigger('blur')
+    input.trigger('focus')
+    await nextTick()
+
+    // select time
+    const list = document.querySelectorAll('.el-time-spinner__list')
+    const hoursEl = list[0]
+    const minutesEl = list[1]
+    const secondsEl = list[2]
+    const hourEl = hoursEl.querySelectorAll('.el-time-spinner__item')[4] as any
+    const minuteEl = minutesEl.querySelectorAll('.el-time-spinner__item')[36] as any
+    const secondEl = secondsEl.querySelectorAll('.el-time-spinner__item')[20] as any
+    hourEl.click()
+    await nextTick()
+    minuteEl.click()
+    await nextTick()
+    secondEl.click()
+    await nextTick();
+
+    // click confirm button
+    (document.querySelector('.el-time-panel__btn.confirm') as any).click()
+    const date = (wrapper.vm as any).value
+    expect(date.getHours()).toBe(4)
+    expect(date.getMinutes()).toBe(36)
+    expect(date.getSeconds()).toBe(20)
+
+    // show picker panel and click cancel button
+    input.trigger('blur')
+    input.trigger('focus')
+    await nextTick();
+    (document.querySelector('.el-time-panel__btn.cancel') as any).click()
+    expect(date.getHours()).toBe(4)
+    expect(date.getMinutes()).toBe(36)
+    expect(date.getSeconds()).toBe(20)
+  })
+
   it('set format', async () => {
     const wrapper = _mount(`<el-time-picker
         v-model="value"

packages/time-picker/src/time-picker-com/panel-time-pick.vue

@@ -49,7 +49,7 @@ import { EVENT_CODE } from '@element-plus/utils/aria'
 import { t } from '@element-plus/locale'
 import TimeSpinner from './basic-time-spinner.vue'
 import dayjs, { Dayjs } from 'dayjs'
-import { getAvaliableArrs } from './useTimePicker'
+import { getAvaliableArrs, useOldValue } from './useTimePicker'
 
 export default defineComponent({
   components: {
@@ -79,7 +79,7 @@ export default defineComponent({
   setup(props, ctx) {
     // data
     const selectionRange = ref([0, 2])
-    const oldValue = ref(props.parsedValue)
+    const oldValue = useOldValue(props)
     // computed
     const transitionName = computed(() => {
       return props.actualVisible === undefined ? 'el-zoom-in-top' : ''

packages/time-picker/src/time-picker-com/panel-time-range.vue

@@ -79,7 +79,7 @@ import union from 'lodash/union'
 import { t } from '@element-plus/locale'
 import { EVENT_CODE } from '@element-plus/utils/aria'
 import TimeSpinner from './basic-time-spinner.vue'
-import { getAvaliableArrs } from './useTimePicker'
+import { getAvaliableArrs, useOldValue } from './useTimePicker'
 
 const makeSelectRange = (start, end) => {
   const result = []
@@ -109,7 +109,7 @@ export default defineComponent({
   setup(props, ctx) {
     const minDate = computed(() => props.parsedValue[0])
     const maxDate = computed(() => props.parsedValue[1])
-    const oldValue = ref(props.parsedValue)
+    const oldValue = useOldValue(props)
     const handleCancel = () => {
       ctx.emit('pick', oldValue.value, null)
     }

packages/time-picker/src/time-picker-com/useTimePicker.ts

@@ -1,3 +1,6 @@
+import { ref, watch } from 'vue'
+import { Dayjs } from 'dayjs'
+
 const makeList = (total, method, methodFunc) => {
   const arr = []
   const disabledArr = method && methodFunc()
@@ -61,3 +64,18 @@ export const getAvaliableArrs = (disabledHours, disabledMinutes, disabledSeconds
     getAvaliableSeconds,
   }
 }
+
+export const useOldValue = (props: {
+  parsedValue?: string | Dayjs | Dayjs[]
+  visible: boolean
+}) => {
+  const oldValue = ref(props.parsedValue)
+
+  watch(() => props.visible, val => {
+    if (!val) {
+      oldValue.value = props.parsedValue
+    }
+  })
+
+  return oldValue
+}