fix(components): [ElSelect] fix group disabled don't work (#4481)

packages/components/select/__tests__/select.spec.ts

@@ -248,6 +248,7 @@ const getGroupSelectVm = (configs: SelectProps = {}, options?) => {
       <el-group-option
         v-for="group in options"
         :key="group.label"
+        :disabled="group.disabled"
         :label="group.label">
         <el-option
           v-for="item in group.options"
@@ -468,6 +469,82 @@ describe('Select', () => {
     expect(wrapper.find('.el-input').classes()).toContain('is-disabled')
   })
 
+  test('group disabled option', () => {
+    const optionGroupData = [
+      {
+        label: 'Australia',
+        disabled: true,
+        options: [
+          {
+            value: 'Sydney',
+            label: 'Sydney',
+          },
+          {
+            value: 'Melbourne',
+            label: 'Melbourne',
+          },
+        ],
+      },
+    ]
+    const wrapper = getGroupSelectVm({}, optionGroupData)
+    const options = wrapper.findAllComponents(Option)
+    expect(options[0].classes('is-disabled')).toBeTruthy()
+  })
+
+  test('keyboard operations when option-group is disabled', async () => {
+    const optionGroupData = [
+      {
+        label: 'Australia',
+        disabled: true,
+        options: [
+          {
+            value: 'Sydney',
+            label: 'Sydney',
+          },
+          {
+            value: 'Melbourne',
+            label: 'Melbourne',
+          },
+        ],
+      },
+      {
+        label: 'China',
+        options: [
+          {
+            value: 'Shanghai',
+            label: 'Shanghai',
+          },
+          {
+            value: 'Shenzhen',
+            label: 'Shenzhen',
+          },
+          {
+            value: 'Guangzhou',
+            label: 'Guangzhou',
+          },
+          {
+            value: 'Dalian',
+            label: 'Dalian',
+          },
+        ],
+      },
+    ]
+    const wrapper = getGroupSelectVm({}, optionGroupData)
+    const select = wrapper.findComponent({ name: 'ElSelect' })
+    const vm = select.vm as any
+    let i = 8
+    while (i--) {
+      vm.navigateOptions('next')
+    }
+    vm.navigateOptions('prev')
+    vm.navigateOptions('prev')
+    vm.navigateOptions('prev')
+    await vm.$nextTick()
+    vm.selectOption()
+    await vm.$nextTick()
+    expect((wrapper.vm as any).value).toBe('Dalian')
+  })
+
   test('visible event', async () => {
     const wrapper = _mount(
       `

packages/components/select/src/option.vue

@@ -91,6 +91,7 @@ export default defineComponent({
       visible,
       hover,
       selectOptionClick,
+      states,
     }
   },
 })

packages/components/select/src/useSelect.ts

@@ -405,7 +405,7 @@ export const useSelect = (props, states: States, ctx) => {
    */
   const checkDefaultFirstOption = () => {
     const optionsInDropdown = optionsArray.value.filter(
-      (n) => n.visible && !n.disabled && !n.groupDisabled
+      (n) => n.visible && !n.disabled && !n.states.groupDisabled
     )
     const userCreatedOption = optionsInDropdown.filter((n) => n.created)[0]
     const firstOriginOption = optionsInDropdown[0]
@@ -797,7 +797,7 @@ export const useSelect = (props, states: States, ctx) => {
       const option = optionsArray.value[states.hoverIndex]
       if (
         option.disabled === true ||
-        option.groupDisabled === true ||
+        option.states.groupDisabled === true ||
         !option.visible
       ) {
         navigateOptions(direction)