From 24cbd4bdbb4335fc349d0013e34a4304a2d0df12 Mon Sep 17 00:00:00 2001
From: Noblet Ouways <91417411+Dsaquel@users.noreply.github.com>
Date: Mon, 11 Aug 2025 14:25:30 +0200
Subject: [PATCH] fix(components): [date-picker] ensure reset visibility on
 picker range (#21691)

closed #21689
---
 .../date-picker/__tests__/date-picker.test.ts | 65 +++++++++++++++++++
 .../__tests__/date-time-picker.test.tsx       | 37 +++++++++++
 .../src/date-picker-com/panel-date-range.vue  |  1 +
 3 files changed, 103 insertions(+)

diff --git a/packages/components/date-picker/__tests__/date-picker.test.ts b/packages/components/date-picker/__tests__/date-picker.test.ts
index 8d0e2fad01..99ce4be992 100644
--- a/packages/components/date-picker/__tests__/date-picker.test.ts
+++ b/packages/components/date-picker/__tests__/date-picker.test.ts
@@ -1634,6 +1634,71 @@ describe('DateRangePicker', () => {
     expect(calendarChangeValue[1]).toBeInstanceOf(Date)
   })
 
+  it('daterange should be reopen successfully', async () => {
+    const wrapper = _mount(
+      `<el-date-picker
+        v-model="value"
+        type='daterange'
+      />`,
+      () => ({ value: '' })
+    )
+    const rangePanelWrapper = wrapper.findComponent(
+      '.el-date-range-picker'
+    ) as VueWrapper<InstanceType<typeof DatePickerRange>>
+
+    expect(rangePanelWrapper.vm.visible).toBe(false)
+
+    const input = wrapper.find('input')
+    await input.trigger('blur')
+    await input.trigger('focus')
+
+    expect(rangePanelWrapper.exists()).toBe(true)
+    expect(rangePanelWrapper.vm.visible).toBe(true)
+
+    const cells = document.querySelectorAll('.available .el-date-table-cell')
+    ;(cells[0] as HTMLElement).click()
+    await nextTick()
+    ;(cells[1] as HTMLElement).click()
+    await nextTick()
+    expect(rangePanelWrapper.vm.visible).toBe(false)
+    await input.trigger('blur')
+    await input.trigger('focus')
+    expect(rangePanelWrapper.vm.visible).toBe(true)
+  })
+
+  it('daterange should be reopen successfully with value-format', async () => {
+    const wrapper = _mount(
+      `<el-date-picker
+        v-model="value"
+        type='daterange'
+        value-format="YYYY-MM-DD"
+      />`,
+      () => ({ value: '' })
+    )
+    const rangePanelWrapper = wrapper.findComponent(
+      '.el-date-range-picker'
+    ) as VueWrapper<InstanceType<typeof DatePickerRange>>
+
+    expect(rangePanelWrapper.vm.visible).toBe(false)
+
+    const input = wrapper.find('input')
+    await input.trigger('blur')
+    await input.trigger('focus')
+
+    expect(rangePanelWrapper.exists()).toBe(true)
+    expect(rangePanelWrapper.vm.visible).toBe(true)
+
+    const cells = document.querySelectorAll('.available .el-date-table-cell')
+    ;(cells[0] as HTMLElement).click()
+    await nextTick()
+    ;(cells[1] as HTMLElement).click()
+    await nextTick()
+    expect(rangePanelWrapper.vm.visible).toBe(false)
+    await input.trigger('blur')
+    await input.trigger('focus')
+    expect(rangePanelWrapper.vm.visible).toBe(true)
+  })
+
   it('reverse selection', async () => {
     const wrapper = _mount(
       `<el-date-picker
diff --git a/packages/components/date-picker/__tests__/date-time-picker.test.tsx b/packages/components/date-picker/__tests__/date-time-picker.test.tsx
index c96814d75d..76ad39eb02 100644
--- a/packages/components/date-picker/__tests__/date-time-picker.test.tsx
+++ b/packages/components/date-picker/__tests__/date-time-picker.test.tsx
@@ -1079,4 +1079,41 @@ describe('Datetimerange', () => {
     expect(spy).toHaveBeenCalledOnce()
     expect(rangePanelWrapper.vm.visible).toBe(false)
   })
+  it('datetimerange should be reopen successfully', async () => {
+    const values = ref()
+    const wrapper = _mount(() => (
+      <DatePicker
+        v-model={values.value}
+        type="datetimerange"
+        valueFormat="YYYY-MM-DD"
+      />
+    ))
+    const rangePanelWrapper = wrapper.findComponent(
+      '.el-date-range-picker'
+    ) as VueWrapper<InstanceType<typeof DatePickerRange>>
+
+    expect(rangePanelWrapper.vm.visible).toBe(false)
+
+    const input = wrapper.find('input')
+    await input.trigger('blur')
+    await input.trigger('focus')
+
+    expect(rangePanelWrapper.exists()).toBe(true)
+    expect(rangePanelWrapper.vm.visible).toBe(true)
+
+    const cells = document.querySelectorAll('.available .el-date-table-cell')
+    ;(cells[0] as HTMLElement).click()
+    await nextTick()
+    ;(cells[1] as HTMLElement).click()
+    await nextTick()
+    const button = document.querySelectorAll(
+      '.el-picker-panel__footer button'
+    )![1] as HTMLButtonElement
+    button.click()
+    await nextTick()
+    expect(rangePanelWrapper.vm.visible).toBe(false)
+    await input.trigger('blur')
+    await input.trigger('focus')
+    expect(rangePanelWrapper.vm.visible).toBe(true)
+  })
 })
diff --git a/packages/components/date-picker/src/date-picker-com/panel-date-range.vue b/packages/components/date-picker/src/date-picker-com/panel-date-range.vue
index ed3381f53c..dfd5fb6cd9 100644
--- a/packages/components/date-picker/src/date-picker-com/panel-date-range.vue
+++ b/packages/components/date-picker/src/date-picker-com/panel-date-range.vue
@@ -698,6 +698,7 @@ const handleRangePick = (
 watch([maxDate, minDate], ([max, min]) => {
   if (max && min) {
     handleRangeConfirm(shouldBeVisible)
+    shouldBeVisible = true
   }
 })