From 16d7e64b24fda4b3364b52c28f9fc5ffe4ea87d9 Mon Sep 17 00:00:00 2001
From: DDDDD12138 <43703884+DDDDD12138@users.noreply.github.com>
Date: Thu, 17 Apr 2025 07:48:53 +0800
Subject: [PATCH] fix(component): resolve 'cursor' style loss caused by
 'pointer-events: none' (#19464)

* feat: remove tabindex when disabled

* fix: resolve 'cursor' style loss caused by 'pointer-events: none'

* Update packages/components/mention/src/mention.vue

Co-authored-by: qiang <qw13131wang@gmail.com>

* chore: update use-focus-controller watch

* chore: remove unnecessary styles

* feat: [select] restore and remove cursor: not-allowed

* feat: override input:disabled use agent stylesheet

* Update packages/theme-chalk/src/select.scss

Co-authored-by: btea <2356281422@qq.com>

---------

Co-authored-by: qiang <qw13131wang@gmail.com>
Co-authored-by: btea <2356281422@qq.com>
---
 .../components/color-picker/src/color-picker.vue   |  2 +-
 packages/components/mention/src/mention.vue        |  2 +-
 .../src/common/picker-range-trigger.vue            |  2 ++
 .../components/time-picker/src/common/props.ts     |  1 +
 packages/hooks/use-focus-controller/index.ts       | 14 ++++++++++----
 packages/theme-chalk/src/color-picker.scss         |  1 -
 packages/theme-chalk/src/date-picker/picker.scss   |  1 -
 packages/theme-chalk/src/input-tag.scss            |  1 -
 packages/theme-chalk/src/input.scss                |  1 -
 packages/theme-chalk/src/mention.scss              |  4 ----
 packages/theme-chalk/src/select.scss               |  6 +++++-
 11 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/packages/components/color-picker/src/color-picker.vue b/packages/components/color-picker/src/color-picker.vue
index 43e28382a2..4853028ef0 100644
--- a/packages/components/color-picker/src/color-picker.vue
+++ b/packages/components/color-picker/src/color-picker.vue
@@ -75,7 +75,7 @@
           t('el.colorpicker.description', { color: modelValue || '' })
         "
         :aria-disabled="colorDisabled"
-        :tabindex="colorDisabled ? -1 : tabindex"
+        :tabindex="colorDisabled ? undefined : tabindex"
         @keydown="handleKeyDown"
         @focus="handleFocus"
         @blur="handleBlur"
diff --git a/packages/components/mention/src/mention.vue b/packages/components/mention/src/mention.vue
index 869b5ea4c5..a45608ac54 100644
--- a/packages/components/mention/src/mention.vue
+++ b/packages/components/mention/src/mention.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="wrapperRef" :class="[ns.b(), ns.is('disabled', disabled)]">
+  <div ref="wrapperRef" :class="ns.b()">
     <el-input
       v-bind="mergeProps(passInputProps, $attrs)"
       ref="elInputRef"
diff --git a/packages/components/time-picker/src/common/picker-range-trigger.vue b/packages/components/time-picker/src/common/picker-range-trigger.vue
index 539a8b60bd..43a1ec765f 100644
--- a/packages/components/time-picker/src/common/picker-range-trigger.vue
+++ b/packages/components/time-picker/src/common/picker-range-trigger.vue
@@ -17,6 +17,7 @@
       :placeholder="startPlaceholder"
       :value="modelValue && modelValue[0]"
       :class="nsRange.b('input')"
+      :disabled="disabled"
       @input="handleStartInput"
       @change="handleStartChange"
     />
@@ -29,6 +30,7 @@
       :placeholder="endPlaceholder"
       :value="modelValue && modelValue[1]"
       :class="nsRange.b('input')"
+      :disabled="disabled"
       @input="handleEndInput"
       @change="handleEndChange"
     />
diff --git a/packages/components/time-picker/src/common/props.ts b/packages/components/time-picker/src/common/props.ts
index 0d1f6c1364..31f62cd1cf 100644
--- a/packages/components/time-picker/src/common/props.ts
+++ b/packages/components/time-picker/src/common/props.ts
@@ -263,6 +263,7 @@ export const timePickerRangeTriggerProps = buildProps({
   },
   startPlaceholder: String,
   endPlaceholder: String,
+  disabled: Boolean,
 } as const)
 
 /**
diff --git a/packages/hooks/use-focus-controller/index.ts b/packages/hooks/use-focus-controller/index.ts
index 86bcb80263..c41526545f 100644
--- a/packages/hooks/use-focus-controller/index.ts
+++ b/packages/hooks/use-focus-controller/index.ts
@@ -1,6 +1,7 @@
 import { getCurrentInstance, onMounted, ref, shallowRef, watch } from 'vue'
 import { useEventListener } from '@vueuse/core'
 import { isElement, isFunction } from '@element-plus/utils'
+import { useProp } from '@element-plus/hooks'
 import type { ShallowRef } from 'vue'
 
 interface UseFocusControllerOptions {
@@ -30,6 +31,7 @@ export function useFocusController<T extends { focus: () => void }>(
   const instance = getCurrentInstance()!
   const { emit } = instance
   const wrapperRef = shallowRef<HTMLElement>()
+  const disabled = useProp<boolean>('disabled')
   const isFocused = ref(false)
 
   const handleFocus = (event: FocusEvent) => {
@@ -56,16 +58,20 @@ export function useFocusController<T extends { focus: () => void }>(
 
   const handleClick = () => {
     if (
-      wrapperRef.value?.contains(document.activeElement) &&
-      wrapperRef.value !== document.activeElement
+      (wrapperRef.value?.contains(document.activeElement) &&
+        wrapperRef.value !== document.activeElement) ||
+      disabled.value
     )
       return
 
     target.value?.focus()
   }
 
-  watch(wrapperRef, (el) => {
-    if (el) {
+  watch([wrapperRef, disabled], ([el, disabled]) => {
+    if (!el) return
+    if (disabled) {
+      el.removeAttribute('tabindex')
+    } else {
       el.setAttribute('tabindex', '-1')
     }
   })
diff --git a/packages/theme-chalk/src/color-picker.scss b/packages/theme-chalk/src/color-picker.scss
index babfd6596d..ea026680c3 100644
--- a/packages/theme-chalk/src/color-picker.scss
+++ b/packages/theme-chalk/src/color-picker.scss
@@ -271,7 +271,6 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
   }
 
   @include when(disabled) {
-    pointer-events: none;
     .#{$namespace}-color-picker__trigger {
       cursor: not-allowed;
     }
diff --git a/packages/theme-chalk/src/date-picker/picker.scss b/packages/theme-chalk/src/date-picker/picker.scss
index 8d3dae8ab6..0cd21b6331 100644
--- a/packages/theme-chalk/src/date-picker/picker.scss
+++ b/packages/theme-chalk/src/date-picker/picker.scss
@@ -189,7 +189,6 @@
     border-color: map.get($input-disabled, 'border');
     color: map.get($input-disabled, 'text-color');
     cursor: not-allowed;
-    pointer-events: none;
 
     &:hover,
     &:focus {
diff --git a/packages/theme-chalk/src/input-tag.scss b/packages/theme-chalk/src/input-tag.scss
index 625a92f5ce..da4ae37062 100644
--- a/packages/theme-chalk/src/input-tag.scss
+++ b/packages/theme-chalk/src/input-tag.scss
@@ -58,7 +58,6 @@
 
   @include when(disabled) {
     cursor: not-allowed;
-    pointer-events: none;
     background-color: getCssVar('fill-color', 'light');
     @include mixed-input-border(#{getCssVar('input-tag-disabled-border')});
 
diff --git a/packages/theme-chalk/src/input.scss b/packages/theme-chalk/src/input.scss
index 554f1df9d3..23dabd83d3 100644
--- a/packages/theme-chalk/src/input.scss
+++ b/packages/theme-chalk/src/input.scss
@@ -323,7 +323,6 @@
     .#{$namespace}-input__wrapper {
       background-color: map.get($input-disabled, 'fill');
       cursor: not-allowed;
-      pointer-events: none;
       @include mixed-input-border(map.get($input-disabled, 'border'));
     }
 
diff --git a/packages/theme-chalk/src/mention.scss b/packages/theme-chalk/src/mention.scss
index 1605c75c70..cb3e7bbd54 100644
--- a/packages/theme-chalk/src/mention.scss
+++ b/packages/theme-chalk/src/mention.scss
@@ -15,10 +15,6 @@
       map.get($mention, 'shadow')
     );
   }
-
-  @include when(disabled) {
-    pointer-events: none;
-  }
 }
 
 @include b(mention-dropdown) {
diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss
index f415a69e75..b186e0dc6a 100644
--- a/packages/theme-chalk/src/select.scss
+++ b/packages/theme-chalk/src/select.scss
@@ -56,7 +56,6 @@
 
     @include when(disabled) {
       cursor: not-allowed;
-      pointer-events: none;
 
       background-color: getCssVar('fill-color', 'light');
       color: getCssVar('text-color', 'placeholder');
@@ -81,6 +80,11 @@
       .#{$namespace}-tag {
         cursor: not-allowed;
       }
+
+      // When the native input tag is disabled, the cursor value is the 'default'.
+      input {
+        cursor: not-allowed;
+      }
     }
   }