From e51ce0dc17118e4f3b58b56eded5471ea1aef32f Mon Sep 17 00:00:00 2001
From: "C.Y.Kun" <30518686+emojiiii@users.noreply.github.com>
Date: Sun, 21 Nov 2021 19:14:29 +0800
Subject: [PATCH] fix(components): [ElSelect] fix group disabled don't work
 (#4481)

---
 .../select/__tests__/select.spec.ts           | 77 +++++++++++++++++++
 packages/components/select/src/option.vue     |  1 +
 packages/components/select/src/useSelect.ts   |  4 +-
 3 files changed, 80 insertions(+), 2 deletions(-)

diff --git a/packages/components/select/__tests__/select.spec.ts b/packages/components/select/__tests__/select.spec.ts
index 33356f45cc..991413b342 100644
--- a/packages/components/select/__tests__/select.spec.ts
+++ b/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(
       `
diff --git a/packages/components/select/src/option.vue b/packages/components/select/src/option.vue
index 0e41dad86c..de2eff5e85 100644
--- a/packages/components/select/src/option.vue
+++ b/packages/components/select/src/option.vue
@@ -91,6 +91,7 @@ export default defineComponent({
       visible,
       hover,
       selectOptionClick,
+      states,
     }
   },
 })
diff --git a/packages/components/select/src/useSelect.ts b/packages/components/select/src/useSelect.ts
index 719dedd92b..3fd3f8fac5 100644
--- a/packages/components/select/src/useSelect.ts
+++ b/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)