fix: the disabled state should not trigger focus (#18108)

packages/components/input/src/input.vue

@@ -263,6 +263,9 @@ const _ref = computed(() => input.value || textarea.value)
 const { wrapperRef, isFocused, handleFocus, handleBlur } = useFocusController(
   _ref,
   {
+    beforeFocus() {
+      return inputDisabled.value
+    },
     afterBlur() {
       if (props.validateEvent) {
         elFormItem?.validate?.('blur').catch((err) => debugWarn(err))

packages/components/mention/src/mention.vue

@@ -173,6 +173,9 @@ const handleInputKeyDown = (e: KeyboardEvent | Event) => {
 }
 
 const { wrapperRef } = useFocusController(elInputRef, {
+  beforeFocus() {
+    return props.disabled
+  },
   afterFocus() {
     syncAfterCursorMove()
   },

packages/components/select-v2/src/useSelect.ts

@@ -106,6 +106,9 @@ const useSelect = (props: ISelectV2Props, emit) => {
   })
 
   const { wrapperRef, isFocused } = useFocusController(inputRef, {
+    beforeFocus() {
+      return selectDisabled.value
+    },
     afterFocus() {
       if (props.automaticDropdown && !expanded.value) {
         expanded.value = true

packages/components/select/src/useSelect.ts

@@ -104,6 +104,9 @@ export const useSelect = (props: ISelectProps, emit) => {
   })
 
   const { wrapperRef, isFocused, handleBlur } = useFocusController(inputRef, {
+    beforeFocus() {
+      return selectDisabled.value
+    },
     afterFocus() {
       if (props.automaticDropdown && !expanded.value) {
         expanded.value = true

packages/hooks/__tests__/use-focus-controller.test.tsx

@@ -117,6 +117,7 @@ describe('useFocusController', () => {
 
     await nextTick()
     expect(wrapper.find('span').text()).toBe('false')
+    expect(wrapper.find('div').attributes('tabindex')).toBe('-1')
     expect(focusHandler).not.toHaveBeenCalled()
     expect(blurHandler).not.toHaveBeenCalled()
 

packages/hooks/use-focus-controller/index.ts

@@ -1,4 +1,4 @@
-import { getCurrentInstance, onMounted, ref, shallowRef } from 'vue'
+import { getCurrentInstance, onMounted, ref, shallowRef, watch } from 'vue'
 import { useEventListener } from '@vueuse/core'
 import { isElement, isFunction } from '@element-plus/utils'
 import type { ShallowRef } from 'vue'
@@ -64,6 +64,12 @@ export function useFocusController<T extends { focus: () => void }>(
     target.value?.focus()
   }
 
+  watch(wrapperRef, (el) => {
+    if (el) {
+      el.setAttribute('tabindex', '-1')
+    }
+  })
+
   useEventListener(wrapperRef, 'focus', handleFocus, true)
   useEventListener(wrapperRef, 'blur', handleBlur, true)
   useEventListener(wrapperRef, 'click', handleClick, true)