fix(components): [date-picker] Return to normal when reopened (#11802)

* fix(components): [date-picker] Return to normal when reopened

closed #11612

* fix(components): [date-picker] Return to normal when reopened

* test(components): [date-picker] update test

* fix: repeatedly calling the onReset function

---------

Co-authored-by: wu.zeMin <244@qq.com>
Co-authored-by: qiang <qw13131wang@gmail.com>

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

@@ -5,6 +5,8 @@ import dayjs from 'dayjs'
 import triggerEvent from '@element-plus/test-utils/trigger-event'
 import { ElFormItem } from '@element-plus/components/form'
 import DatePicker from '../src/date-picker'
+import type DatePickerRange from '../src/date-picker-com/panel-date-range.vue'
+import type { VueWrapper } from '@vue/test-utils'
 import type { VNode } from 'vue'
 
 const formatStr = 'YYYY-MM-DD HH:mm:ss'
@@ -631,8 +633,11 @@ describe('Datetimerange', () => {
     expect(btn.getAttribute('disabled')).not.toBeUndefined() // invalid input disables button
     btn.click()
     await nextTick()
-    const rangePanel = document.querySelector('.el-date-range-picker')!
-    expect(rangePanel.getAttribute('visible')).toBe('true') // popper still open
+    const rangePanelWrapper = wrapper.findComponent(
+      '.el-date-range-picker'
+    ) as VueWrapper<InstanceType<typeof DatePickerRange>>
+    expect(rangePanelWrapper.exists()).toBe(true)
+    expect(rangePanelWrapper.vm.visible).toBe(true) // popper still open
     expect(value.value).toBe('')
     leftDateInput.value = '2001-09-01'
     triggerEvent(leftDateInput, 'input', true)
@@ -641,7 +646,7 @@ describe('Datetimerange', () => {
     expect(btn.getAttribute('disabled')).not.toBeUndefined()
     btn.click()
     await nextTick()
-    expect(rangePanel.getAttribute('visible')).toBe('false') // popper dismiss
+    expect(rangePanelWrapper.vm.visible).toBe(false) // popper dismiss
     expect(value.value).not.toBe('')
   })
 

packages/components/date-picker/src/composables/use-range-picker.ts

@@ -65,6 +65,18 @@ export const useRangePicker = (
     }
   }
 
+  const onReset = (parsedValue: PanelRangeSharedProps['parsedValue']) => {
+    if (isArray(parsedValue) && parsedValue.length === 2) {
+      const [start, end] = parsedValue
+      minDate.value = start
+      leftDate.value = start
+      maxDate.value = end
+      onParsedValueChanged(unref(minDate), unref(maxDate))
+    } else {
+      restoreDefault()
+    }
+  }
+
   const restoreDefault = () => {
     const [start, end] = getDefaultValue(unref(defaultValue), {
       lang: unref(lang),
@@ -87,21 +99,7 @@ export const useRangePicker = (
     { immediate: true }
   )
 
-  watch(
-    () => props.parsedValue,
-    (parsedValue) => {
-      if (isArray(parsedValue) && parsedValue.length === 2) {
-        const [start, end] = parsedValue
-        minDate.value = start
-        leftDate.value = start
-        maxDate.value = end
-        onParsedValueChanged(unref(minDate), unref(maxDate))
-      } else {
-        restoreDefault()
-      }
-    },
-    { immediate: true }
-  )
+  watch(() => props.parsedValue, onReset, { immediate: true })
 
   return {
     minDate,
@@ -115,6 +113,7 @@ export const useRangePicker = (
     handleRangeConfirm,
     handleShortcutClick,
     onSelect,
+    onReset,
     t,
   }
 }

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

@@ -250,7 +250,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref, toRef, unref } from 'vue'
+import { computed, inject, ref, toRef, unref, watch } from 'vue'
 import dayjs from 'dayjs'
 import { ClickOutside as vClickoutside } from '@element-plus/directives'
 import { isArray } from '@element-plus/utils'
@@ -312,6 +312,7 @@ const {
   handleRangeConfirm,
   handleShortcutClick,
   onSelect,
+  onReset,
   t,
 } = useRangePicker(props, {
   defaultValue,
@@ -321,6 +322,16 @@ const {
   onParsedValueChanged,
 })
 
+watch(
+  () => props.visible,
+  (visible) => {
+    if (!visible && rangeState.value.selecting) {
+      onReset(props.parsedValue)
+      onSelect(false)
+    }
+  }
+)
+
 const dateUserInput = ref<UserInput>({
   min: null,
   max: null,

packages/components/date-picker/src/props/panel-date-range.ts

@@ -6,6 +6,7 @@ import type { ExtractPropTypes } from 'vue'
 export const panelDateRangeProps = buildProps({
   ...panelSharedProps,
   ...panelRangeSharedProps,
+  visible: Boolean,
 } as const)
 
 export type PanelDateRangeProps = ExtractPropTypes<typeof panelDateRangeProps>