diff --git a/packages/select/__tests__/select.spec.ts b/packages/select/__tests__/select.spec.ts index f095e2cbf9..81c71cad1d 100644 --- a/packages/select/__tests__/select.spec.ts +++ b/packages/select/__tests__/select.spec.ts @@ -115,6 +115,7 @@ describe('Select', () => { afterEach(() => { document.body.innerHTML = '' }) + test('create', async () => { const wrapper = _mount(``, () => ({ 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(` @@ -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(` + + + + `, () => ({ + 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) + }) }) diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue index d66b727e83..c312b1eaf0 100644 --- a/packages/select/src/select.vue +++ b/packages/select/src/select.vue @@ -31,7 +31,7 @@ > { 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