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>

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"

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"

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"
     />

packages/components/time-picker/src/common/props.ts

@@ -263,6 +263,7 @@ export const timePickerRangeTriggerProps = buildProps({
   },
   startPlaceholder: String,
   endPlaceholder: String,
+  disabled: Boolean,
 } as const)
 
 /**

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')
     }
   })

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;
     }

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 {

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')});
 

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'));
     }
 

packages/theme-chalk/src/mention.scss

@@ -15,10 +15,6 @@
       map.get($mention, 'shadow')
     );
   }
-
-  @include when(disabled) {
-    pointer-events: none;
-  }
 }
 
 @include b(mention-dropdown) {

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;
+      }
     }
   }