fix(components): prevent blur event when is disabled (#19320)

fix: prevent blur event when is disabled

packages/components/mention/src/mention.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="wrapperRef" :class="ns.b()">
+  <div ref="wrapperRef" :class="[ns.b(), ns.is('disabled', disabled)]">
     <el-input
       v-bind="mergeProps(passInputProps, $attrs)"
       ref="elInputRef"

packages/theme-chalk/src/color-picker.scss

@@ -271,6 +271,7 @@ $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,6 +189,7 @@
     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,6 +58,7 @@
 
   @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,6 +323,7 @@
     .#{$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,6 +15,10 @@
       map.get($mention, 'shadow')
     );
   }
+
+  @include when(disabled) {
+    pointer-events: none;
+  }
 }
 
 @include b(mention-dropdown) {

packages/theme-chalk/src/select.scss

@@ -56,6 +56,7 @@
 
     @include when(disabled) {
       cursor: not-allowed;
+      pointer-events: none;
 
       background-color: getCssVar('fill-color', 'light');
       color: getCssVar('text-color', 'placeholder');