[pull] dev from element-plus:dev

.github/workflows/lint-commit-message-post.yml

@@ -19,21 +19,21 @@ jobs:
 
     steps:
       - name: Download result
-        uses: dawidd6/action-download-artifact@634d83b91986fcec9be314054943fa5c976aeb0e # v25
+        uses: dawidd6/action-download-artifact@eab87c9830c39eff17e5a6eadb20bfb4bc880477 # v27
         with:
           workflow: ${{ github.event.workflow.id }}
           run_id: ${{ github.event.workflow_run.id }}
           name: commit-lint-result
 
       - name: Derive PR number
-        uses: dawidd6/action-download-artifact@634d83b91986fcec9be314054943fa5c976aeb0e # v25
+        uses: dawidd6/action-download-artifact@eab87c9830c39eff17e5a6eadb20bfb4bc880477 # v27
         with:
           workflow: ${{ github.event.workflow.id }}
           run_id: ${{ github.event.workflow_run.id }}
           name: pr-number
 
       - name: Download PR author
-        uses: dawidd6/action-download-artifact@634d83b91986fcec9be314054943fa5c976aeb0e # v25
+        uses: dawidd6/action-download-artifact@eab87c9830c39eff17e5a6eadb20bfb4bc880477 # v27
         with:
           workflow: ${{ github.event.workflow.id }}
           run_id: ${{ github.event.workflow_run.id }}

.github/workflows/pr-docs-deploy.yml

@@ -18,7 +18,7 @@ jobs:
     if: ${{ github.event.workflow_run.conclusion == 'success' }}
     steps:
       - name: Download pr number
-        uses: dawidd6/action-download-artifact@634d83b91986fcec9be314054943fa5c976aeb0e # v25
+        uses: dawidd6/action-download-artifact@eab87c9830c39eff17e5a6eadb20bfb4bc880477 # v27
         with:
           workflow: ${{ github.event.workflow.id }}
           run_id: ${{ github.event.workflow_run.id }}
@@ -29,7 +29,7 @@ jobs:
         run: echo "id=$(<pr.txt)" >> $GITHUB_OUTPUT
 
       - name: Download artifact
-        uses: dawidd6/action-download-artifact@634d83b91986fcec9be314054943fa5c976aeb0e # v25
+        uses: dawidd6/action-download-artifact@eab87c9830c39eff17e5a6eadb20bfb4bc880477 # v27
         with:
           workflow: ${{ github.event.workflow.id }}
           run_id: ${{ github.event.workflow_run.id }}
@@ -89,7 +89,7 @@ jobs:
     if: ${{ github.event.workflow_run.conclusion == 'failure' }}
     steps:
       - name: Download pr number
-        uses: dawidd6/action-download-artifact@634d83b91986fcec9be314054943fa5c976aeb0e # v25
+        uses: dawidd6/action-download-artifact@eab87c9830c39eff17e5a6eadb20bfb4bc880477 # v27
         with:
           workflow: ${{ github.event.workflow.id }}
           run_id: ${{ github.event.workflow_run.id }}

.github/workflows/publish-size-report-comment.yml

@@ -23,14 +23,14 @@ jobs:
 
     steps:
       - name: Download comment body
-        uses: dawidd6/action-download-artifact@634d83b91986fcec9be314054943fa5c976aeb0e # v25
+        uses: dawidd6/action-download-artifact@eab87c9830c39eff17e5a6eadb20bfb4bc880477 # v27
         with:
           workflow: ${{ github.event.workflow.id }}
           run_id: ${{ github.event.workflow_run.id }}
           name: compressed-size-comment
 
       - name: Derive PR number
-        uses: dawidd6/action-download-artifact@634d83b91986fcec9be314054943fa5c976aeb0e # v25
+        uses: dawidd6/action-download-artifact@eab87c9830c39eff17e5a6eadb20bfb4bc880477 # v27
         with:
           workflow: ${{ github.event.workflow.id }}
           run_id: ${{ github.event.workflow_run.id }}

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "packageManager": "pnpm@12.6.0",
+  "packageManager": "pnpm@12.8.1",
   "workspaces": [
     "packages/*",
     "play",
@@ -79,8 +79,8 @@
     "@types/node": "^24.19.0",
     "@vitejs/plugin-vue": "catalog:",
     "@vitejs/plugin-vue-jsx": "catalog:",
-    "@vitest/coverage-v8": "^5.0.1",
-    "@vitest/ui": "^5.0.1",
+    "@vitest/coverage-v8": "^5.0.2",
+    "@vitest/ui": "^5.0.2",
     "@vue/server-renderer": "catalog:",
     "@vue/shared": "catalog:",
     "@vue/test-utils": "catalog:",
@@ -93,15 +93,15 @@
     "happy-dom": "^20.14.5",
     "husky": "^9.1.7",
     "jsdom": "16.4.0",
-    "lint-staged": "17.5.1",
+    "lint-staged": "17.6.0",
     "prettier": "catalog:",
     "puppeteer": "^25.9.0",
     "resize-observer-polyfill": "^1.5.1",
     "rimraf": "^6.1.3",
     "tinyglobby": "^0.2.17",
     "tsx": "catalog:",
     "typescript": "catalog:",
-    "vitest": "^5.0.1",
+    "vitest": "^5.0.2",
     "vue": "catalog:",
     "vue-router": "^5.3.1",
     "vue-tsc": "=3.1.5"

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

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import { computed, nextTick, ref } from 'vue'
-import { mount } from '@vue/test-utils'
+import { flushPromises, mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import dayjs from 'dayjs'
 import { CircleClose } from '@element-plus/icons-vue'
@@ -585,6 +585,103 @@ describe('TimePicker', () => {
 
     vi.useRealTimers()
   })
+
+  describe('clear with externally normalized empty value (#24826)', () => {
+    const mountWithNormalizedClear = (onChange: ReturnType<typeof vi.fn>) => {
+      const date = ref(new Date())
+      return mount(
+        () => (
+          <TimePicker
+            modelValue={date.value}
+            onUpdate:modelValue={(val) => (date.value = val ?? '')}
+            onChange={onChange}
+          />
+        ),
+        { attachTo: document.body }
+      )
+    }
+
+    it('does not open the panel when the clear icon is clicked while unfocused', async () => {
+      const onChange = vi.fn()
+      const wrapper = mountWithNormalizedClear(onChange)
+      await nextTick()
+
+      await wrapper.find('.el-input').trigger('mouseenter')
+      const clearIcon = wrapper.find('.clear-icon')
+      expect(clearIcon.exists()).toBe(true)
+
+      await clearIcon.trigger('mousedown')
+      // in real browsers ElInput's capture-phase click listener focuses the
+      // input here, and a microtask checkpoint runs before the clear icon's
+      // own click handler
+      wrapper.find('input').element.focus()
+      await nextTick()
+      await nextTick()
+      await rAF()
+      const popperEl = document.querySelector(
+        '.el-picker__popper'
+      ) as HTMLElement
+      expect(popperEl.style.display).toBe('none')
+
+      await clearIcon.trigger('click')
+      await flushPromises()
+
+      expect(onChange).toHaveBeenCalledTimes(1)
+      expect(onChange).toHaveBeenCalledWith(null)
+    })
+
+    it('emits change only once when clearing while the panel is open', async () => {
+      const onChange = vi.fn()
+      const wrapper = mountWithNormalizedClear(onChange)
+      await nextTick()
+
+      await wrapper.find('input').trigger('focus')
+      await nextTick()
+      await nextTick()
+      await wrapper.find('.el-input').trigger('mouseenter')
+      await wrapper.find('.clear-icon').trigger('click')
+      await flushPromises()
+
+      expect(onChange).toHaveBeenCalledTimes(1)
+      expect(onChange).toHaveBeenCalledWith(null)
+    })
+
+    it('still opens the panel on focus after a canceled clear gesture', async () => {
+      const date = ref(new Date())
+      const wrapper = mount(
+        () => <TimePicker v-model={date.value} clearable />,
+        {
+          attachTo: document.body,
+        }
+      )
+      await nextTick()
+
+      const input = wrapper.find('input')
+      input.element.focus()
+      await nextTick()
+      await nextTick()
+      await rAF()
+      const popperEl = document.querySelector(
+        '.el-picker__popper'
+      ) as HTMLElement
+      expect(popperEl.style.display).not.toBe('none')
+
+      // press the clear icon but release over the wrapper (canceled gesture):
+      // neither onClear nor onMouseLeave runs
+      await wrapper.find('.el-input').trigger('mouseenter')
+      await wrapper.find('.clear-icon').trigger('mousedown')
+      await wrapper.find('.el-input__wrapper').trigger('click')
+      await nextTick()
+
+      input.element.blur()
+      await nextTick()
+      input.element.focus()
+      await nextTick()
+      await nextTick()
+      await rAF()
+      expect(popperEl.style.display).not.toBe('none')
+    })
+  })
 })
 
 describe('TimePicker(range)', () => {

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

@@ -86,7 +86,7 @@
           <el-icon
             v-if="showClearBtn && clearIcon"
             :class="`${nsInput.e('icon')} clear-icon`"
-            @mousedown.prevent="NOOP"
+            @mousedown.prevent="onClearIconMousedown"
             @click="onClear"
           >
             <component :is="clearIcon" />
@@ -145,7 +145,7 @@
           <el-icon
             v-if="clearIcon"
             :class="clearIconKls"
-            @mousedown.prevent="NOOP"
+            @mousedown.prevent="onClearIconMousedown"
             @click="onClear"
           >
             <component :is="clearIcon" />
@@ -264,6 +264,7 @@ const refPopper = ref<TooltipInstance>()
 const inputRef = ref<InputInstance>()
 const valueOnOpen = ref<TimePickerDefaultProps['modelValue'] | null>(null)
 let hasJustTabExitedInput = false
+let isClearIconMousedown = false
 
 const pickerDisabled = useFormDisabled()
 
@@ -289,6 +290,11 @@ const { isFocused, handleFocus, handleBlur } = useFocusController(inputRef, {
   },
   afterFocus() {
     if (!props.automaticDropdown) return
+    // Clicking the clear icon focuses the input, which must not open the panel (#24826)
+    if (isClearIconMousedown) {
+      isClearIconMousedown = false
+      return
+    }
     pickerVisible.value = true
   },
   beforeBlur(event) {
@@ -306,6 +312,7 @@ const { isFocused, handleFocus, handleBlur } = useFocusController(inputRef, {
     }
     pickerVisible.value = false
     hasJustTabExitedInput = false
+    isClearIconMousedown = false
     props.validateEvent && formItem?.validate('blur').catch(NOOP)
   },
 })
@@ -348,7 +355,16 @@ const emitChange = (
   isClear?: boolean
 ) => {
   // determine user real change only
-  if (isClear || !valueEquals(val, valueOnOpen.value)) {
+  if (
+    isClear ||
+    !(
+      valueEquals(val, valueOnOpen.value) ||
+      // the parent may normalize the cleared value to another empty
+      // representation, e.g. `null` to '' (#24826)
+      (emptyValues.isEmptyValue(val) &&
+        emptyValues.isEmptyValue(valueOnOpen.value))
+    )
+  ) {
     emit(CHANGE_EVENT, val)
     // Set the value of valueOnOpen when clearing to avoid triggering change events multiple times.
     isClear && (valueOnOpen.value = val)
@@ -452,8 +468,13 @@ const showClearBtn = computed(
     (hovering.value || isFocused.value)
 )
 
+const onClearIconMousedown = () => {
+  isClearIconMousedown = true
+}
+
 const onClear = (event?: MouseEvent) => {
   if (props.readonly || pickerDisabled.value) return
+  isClearIconMousedown = false
   if (showClearBtn.value) {
     event?.stopPropagation()
     // When the handleClear Function was provided, emit null will be executed inside it
@@ -487,6 +508,7 @@ const onMouseEnter = () => {
 }
 const onMouseLeave = () => {
   hovering.value = false
+  isClearIconMousedown = false
 }
 
 const onTouchStartInput = (event: TouchEvent) => {