fix(VSelect): change onMouseUp to handle menu toggle on mouse events (#…

…9476)

When append-inner was clicked, the menu could be openned but not closed, this was cause by onClick
always setting the isMenuActive to true. Made a change to only allow onMouseUp totoggle isMenuActive
state when the append-inner icon is clicked

fix #6564

packages/vuetify/src/components/VSelect/VSelect.ts

@@ -48,6 +48,7 @@ interface options extends InstanceType<typeof baseMixins> {
     label: HTMLElement
     input: HTMLInputElement
     'prepend-inner': HTMLElement
+    'append-inner': HTMLElement
     prefix: HTMLElement
     suffix: HTMLElement
   }
@@ -558,10 +559,12 @@ export default baseMixins.extend<options>().extend({
       }
       this.selectedIndex = -1
     },
-    onClick () {
+    onClick (e: MouseEvent) {
       if (this.isDisabled) return
 
-      this.isMenuActive = true
+      if (!this.isAppendInner(e.target)) {
+        this.isMenuActive = true
+      }
 
       if (!this.isFocused) {
         this.isFocused = true
@@ -662,16 +665,10 @@ export default baseMixins.extend<options>().extend({
     },
     onMouseUp (e: MouseEvent) {
       if (this.hasMouseDown && e.which !== 3) {
-        const appendInner = this.$refs['append-inner']
-
         // If append inner is present
         // and the target is itself
         // or inside, toggle menu
-        if (this.isMenuActive &&
-          appendInner &&
-          (appendInner === e.target ||
-          (appendInner as { [key: string]: any }).contains(e.target))
-        ) {
+        if (this.isAppendInner(e.target)) {
           this.$nextTick(() => (this.isMenuActive = !this.isMenuActive))
         // If user is clicking in the container
         // and field is enclosed, activate it
@@ -811,5 +808,12 @@ export default baseMixins.extend<options>().extend({
       this.internalValue = value
       value !== oldValue && this.$emit('change', value)
     },
+    isAppendInner (target: any) {
+      // return true if append inner is present
+      // and the target is itself or inside
+      const appendInner = this.$refs['append-inner']
+
+      return appendInner && (appendInner === target || appendInner.contains(target))
+    },
   },
 })

packages/vuetify/src/components/VSelect/__tests__/VSelect4.spec.ts

@@ -305,4 +305,38 @@ describe('VSelect.ts', () => {
     await wrapper.vm.$nextTick()
     expect(listIndexUpdate).toHaveBeenCalledWith(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)
+  })
 })