fix(select): tag can't close if the option is disabled (#1605)

* fix(select): tag can't close if the option is disabled

re #1594, #1595

* fix(select): same change on collapse tag

* test: add test for tag of disabled option is not closable

* fix: fix when select is clearable

* test: add test

packages/select/__tests__/select.spec.ts

@@ -115,6 +115,7 @@ describe('Select', () => {
   afterEach(() => {
     document.body.innerHTML = ''
   })
+
   test('create', async () => {
     const wrapper = _mount(`<el-select v-model="value"></el-select>`, () => ({ value: '' }))
     expect(wrapper.classes()).toContain('el-select')
@@ -166,7 +167,6 @@ describe('Select', () => {
     expect(wrapper.find('.el-input__inner').element.value).toBe('双皮奶')
   })
 
-
   test('sync set value and options', async () => {
     const wrapper = _mount(`
     <el-select v-model="value">
@@ -859,4 +859,68 @@ describe('Select', () => {
     await nextTick()
     expect(vm.value).toBe('Shanghai')
   })
+
+  test('tag of disabled option is not closable', async () => {
+    const wrapper = _mount(`
+    <el-select v-model="vendors" multiple :collapse-tags="isCollapsed" :clearable="isClearable" placeholder="Select Business Unit">
+    <el-option
+      v-for="(vendor, index) in options"
+      :key="index"
+      :value="index + 1"
+      :label="vendor.name"
+      :disabled="vendor.isDisabled"
+    >
+    </el-option>
+  </el-select>`, () => ({
+      vendors: [2, 3, 4],
+      isCollapsed: false,
+      isClearable: false,
+      options: [
+        { name: 'Test 1', isDisabled: false },
+        { name: 'Test 2', isDisabled: true },
+        { name: 'Test 3', isDisabled: false },
+        { name: 'Test 4', isDisabled: true },
+      ],
+    }))
+    const vm = wrapper.vm as any
+    await vm.$nextTick()
+    const selectVm = wrapper.findComponent({ name: 'ElSelect' }).vm as any
+    expect(wrapper.findAll('.el-tag').length).toBe(3)
+    const tagCloseIcons = wrapper.findAll('.el-tag__close')
+    expect(tagCloseIcons.length).toBe(1)
+    await tagCloseIcons[0].trigger('click')
+    expect(wrapper.findAll('.el-tag__close').length).toBe(0)
+    expect(wrapper.findAll('.el-tag').length).toBe(2)
+
+    //test if is clearable
+    vm.isClearable = true
+    vm.vendors = [2, 3, 4]
+    await vm.$nextTick()
+    selectVm.inputHovering = true
+    await selectVm.$nextTick()
+    const iconClear = wrapper.find('.el-input__icon.el-icon-circle-close')
+    expect(wrapper.findAll('.el-tag').length).toBe(3)
+    await iconClear.trigger('click')
+    expect(wrapper.findAll('.el-tag').length).toBe(2)
+
+    // test for collapse select
+    vm.vendors = [1, 2, 4]
+    vm.isCollapsed = true
+    vm.isClearable = false
+    await vm.$nextTick()
+    expect(wrapper.findAll('.el-tag').length).toBe(2)
+    await wrapper.find('.el-tag__close').trigger('click')
+    expect(wrapper.findAll('.el-tag').length).toBe(2)
+    expect(wrapper.findAll('.el-tag__close').length).toBe(0)
+
+    // test for collapse select if is clearable
+    vm.vendors = [1, 2, 4]
+    vm.isCollapsed = true
+    vm.isClearable = true
+    await vm.$nextTick()
+    expect(wrapper.findAll('.el-tag__close').length).toBe(1)
+    await wrapper.find('.el-tag__close').trigger('click')
+    expect(wrapper.findAll('.el-tag').length).toBe(2)
+    expect(wrapper.findAll('.el-tag__close').length).toBe(0)
+  })
 })

packages/select/src/select.vue

@@ -31,7 +31,7 @@
           >
             <span v-if="collapseTags && selected.length">
               <el-tag
-                :closable="!selectDisabled"
+                :closable="!selectDisabled && !selected[0].isDisabled"
                 :size="collapseTagSize"
                 :hit="selected[0].hitState"
                 type="info"
@@ -56,7 +56,7 @@
                 <el-tag
                   v-for="item in selected"
                   :key="getValueKey(item)"
-                  :closable="!selectDisabled"
+                  :closable="!selectDisabled && !item.isDisabled"
                   :size="collapseTagSize"
                   :hit="item.hitState"
                   type="info"

packages/select/src/useSelect.ts

@@ -384,6 +384,7 @@ export const useSelect = (props, states: States, ctx) => {
         option = {
           value,
           currentLabel: cachedOption.currentLabel,
+          isDisabled: cachedOption.isDisabled,
         }
         break
       }
@@ -469,6 +470,11 @@ export const useSelect = (props, states: States, ctx) => {
   const deleteSelected = event => {
     event.stopPropagation()
     const value = props.multiple ? [] : ''
+    if (typeof value !== 'string') {
+      for (const item of states.selected) {
+        if (item.isDisabled) value.push(item.value)
+      }
+    }
     ctx.emit(UPDATE_MODEL_EVENT, value)
     emitChange(value)
     states.visible = false