diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.ts b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.ts index aab167015be4..fd547a861c8f 100644 --- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.ts +++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.ts @@ -299,14 +299,14 @@ export default VSelect.extend({ ? VSelect.options.methods.genSelections.call(this) : [] }, - onClick () { + onClick (e: MouseEvent) { if (this.isDisabled) return this.selectedIndex > -1 ? (this.selectedIndex = -1) : this.onFocus() - this.activateMenu() + if (!this.isAppendInner(e.target)) this.activateMenu() }, onInput (e: Event) { if ( diff --git a/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete3.spec.ts b/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete3.spec.ts index 70883feae2a7..e0fe58f671c3 100644 --- a/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete3.spec.ts +++ b/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete3.spec.ts @@ -158,4 +158,38 @@ describe('VAutocomplete.ts', () => { expect(wrapper.vm.selectedIndex).toBe(-1) }) + + it('should close menu when append icon is clicked', async () => { + const wrapper = mountFunction({ + propsData: { + items: ['foo', 'bar'], + }, + }) + + const append = wrapper.find('.v-input__append-inner') + const slot = wrapper.find('.v-input__slot') + slot.trigger('click') + expect(wrapper.vm.isMenuActive).toBe(true) + append.trigger('mousedown') + append.trigger('mouseup') + append.trigger('click') + await wrapper.vm.$nextTick() + expect(wrapper.vm.isMenuActive).toBe(false) + }) + + it('should open menu when append icon is clicked', async () => { + const wrapper = mountFunction({ + propsData: { + items: ['foo', 'bar'], + }, + }) + + const append = wrapper.find('.v-input__append-inner') + + append.trigger('mousedown') + append.trigger('mouseup') + append.trigger('click') + await wrapper.vm.$nextTick() + expect(wrapper.vm.isMenuActive).toBe(true) + }) })