diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue index c370118be..c60f1a8c0 100644 --- a/packages/select/src/select.vue +++ b/packages/select/src/select.vue @@ -74,7 +74,7 @@ :auto-complete="autoComplete" :size="selectSize" :disabled="selectDisabled" - :readonly="!filterable || multiple" + :readonly="!filterable || multiple || !visible" :validate-event="false" :class="{ 'is-focus': visible }" @focus="handleFocus" @@ -293,6 +293,7 @@ optionsCount: 0, filteredOptionsCount: 0, visible: false, + softFocus: false, selectedLabel: '', hoverIndex: -1, query: '', @@ -334,7 +335,6 @@ visible(val) { if (!val) { - this.$refs.reference.$el.querySelector('input').blur(); this.handleIconHide(); this.broadcast('ElSelectDropdown', 'destroyPopper'); if (this.$refs.input) { @@ -519,7 +519,11 @@ }, handleFocus(event) { - this.$emit('focus', event); + if (!this.softFocus) { + this.$emit('focus', event); + } else { + this.softFocus = false; + } }, handleBlur(event) { @@ -631,7 +635,15 @@ this.emitChange(option.value); this.visible = false; } - this.$nextTick(() => this.scrollToOption(option)); + this.$nextTick(() => { + this.scrollToOption(option); + this.setSoftFocus(); + }); + }, + + setSoftFocus() { + this.softFocus = true; + (this.$refs.input || this.$refs.reference).focus(); }, getValueIndex(arr = [], value) { diff --git a/test/unit/specs/select.spec.js b/test/unit/specs/select.spec.js index ffc371881..fe03b45e0 100644 --- a/test/unit/specs/select.spec.js +++ b/test/unit/specs/select.spec.js @@ -667,6 +667,39 @@ describe('Select', () => { }); }); + it('soft focus', done => { + vm = createVue({ + template: ` +
+ + + +
+ `, + data() { + return { + value: '' + }; + } + }, true); + + const spyInputFocus = sinon.spy(); + const spySelectFocus = sinon.spy(); + + vm.$refs.select.$on('focus', spySelectFocus); + vm.$refs.select.$refs.reference.$on('focus', spyInputFocus); + + const option = vm.$el.querySelectorAll('.el-select-dropdown__item')[0]; + triggerEvent(option, 'mouseenter'); + option.click(); + + vm.$nextTick(_ => { + expect(spyInputFocus.calledOnce).to.be.true; + expect(spySelectFocus.calledOnce).not.to.be.true; + done(); + }); + }); + it('focus', done => { vm = createVue({ template: `