From 2f60cb82d4ae8c1b5188b9ba75ab4b2f40a2b646 Mon Sep 17 00:00:00 2001
From: Ernest <iendeavor.github.io@gmail.com>
Date: Thu, 4 Mar 2021 20:57:43 +0800
Subject: [PATCH] fix(select): disabled group not works (#1559)

* fix(select): disabled group not works

* test: add group disabled test
---
 packages/select/__tests__/select.spec.ts | 56 ++++++++++++++++++++++++
 packages/select/src/useOption.ts         |  4 ++
 2 files changed, 60 insertions(+)

diff --git a/packages/select/__tests__/select.spec.ts b/packages/select/__tests__/select.spec.ts
index f187bd86db..f095e2cbf9 100644
--- a/packages/select/__tests__/select.spec.ts
+++ b/packages/select/__tests__/select.spec.ts
@@ -1,6 +1,7 @@
 import { mount } from '@vue/test-utils'
 import { nextTick } from 'vue'
 import Select from '../src/select.vue'
+import Group from '../src/option-group.vue'
 import Option from '../src/option.vue'
 
 jest.useFakeTimers()
@@ -23,6 +24,7 @@ const _mount = (template: string, data: any = () => ({}), otherObj?) => mount({
   components: {
     'el-select': Select,
     'el-option': Option,
+    'el-group-option': Group,
   },
   template,
   data,
@@ -803,4 +805,58 @@ describe('Select', () => {
     expect(select.selected[0].currentLabel !== '').toBeTruthy()
     expect(select.selected[1].currentLabel !== '').toBeTruthy()
   })
+
+  test('disabled group', async () => {
+    const wrapper = _mount(`
+    <el-select v-model="value">
+      <el-group-option
+        v-for="group in options"
+        :key="group.label"
+        :label="group.label"
+        :disabled="group.disabled">
+        <el-option
+          v-for="item in group.options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-group-option>
+    </el-select>`,
+    () => ({
+      options: [
+        {
+          label: 'Popular cities',
+          options: [
+            { value: 'Shanghai', label: 'Shanghai' },
+            { value: 'Beijing', label: 'Beijing' },
+          ],
+        },
+        {
+          label: 'City name',
+          options: [
+            { value: 'Chengdu',label: 'Chengdu' },
+            { value: 'Shenzhen', label: 'Shenzhen' },
+            { value: 'Guangzhou',label: 'Guangzhou' },
+            { value: 'Dalian',label: 'Dalian' },
+          ],
+        },
+      ],
+      value: '',
+    }))
+
+    const vm = wrapper.vm as any
+    wrapper.find('.select-trigger').trigger('click')
+    await nextTick()
+    vm.options[1].disabled = true
+    await nextTick()
+    const options = getOptions()
+    expect(options[0].className).not.toContain('is-disabled')
+    expect(options[2].className).toContain('is-disabled')
+    options[0].click()
+    await nextTick()
+    expect(vm.value).toBe('Shanghai')
+    options[2].click()
+    await nextTick()
+    expect(vm.value).toBe('Shanghai')
+  })
 })
diff --git a/packages/select/src/useOption.ts b/packages/select/src/useOption.ts
index 8859b31b71..f8b5552a63 100644
--- a/packages/select/src/useOption.ts
+++ b/packages/select/src/useOption.ts
@@ -101,6 +101,10 @@ export function useOption(props, states) {
     }
   })
 
+  watch(() => selectGroup.disabled, () => {
+    states.groupDisabled = selectGroup.disabled
+  }, { immediate: true })
+
   // Emitter
   select.selectEmitter.on(selectEvents.queryChange, queryChange)