fix(VSelect): do not open menu if clicking on selection item (vuetify…

…js#12343)

clicking on a selection item (for example the close icon of a v-chip) would cause menu to open if component was using filled/outlined/solo

fixes vuetifyjs#11824

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

@@ -711,10 +711,6 @@ export default baseMixins.extend<options>().extend({
         // or inside, toggle menu
         if (this.isAppendInner(e.target)) {
           this.$nextTick(() => (this.isMenuActive = !this.isMenuActive))
-        // If user is clicking in the container
-        // and field is enclosed, activate it
-        } else if (this.isEnclosed) {
-          this.isMenuActive = true
         }
       }
 

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

@@ -15,6 +15,7 @@ import {
   Wrapper,
 } from '@vue/test-utils'
 
+// eslint-disable-next-line max-statements
 describe('VSelect.ts', () => {
   type Instance = InstanceType<typeof VSelect>
   let mountFunction: (options?: object) => Wrapper<Instance>
@@ -43,6 +44,10 @@ describe('VSelect.ts', () => {
     }
   })
 
+  afterEach(() => {
+    document.body.removeChild(el)
+  })
+
   it('should return numeric 0', async () => {
     const item = { value: 0, text: '0' }
     const wrapper = mountFunction({

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

@@ -37,6 +37,10 @@ describe('VSelect.ts', () => {
     }
   })
 
+  afterEach(() => {
+    document.body.removeChild(el)
+  })
+
   it('should use slotted prepend-item', () => {
     const wrapper = mountFunction({
       propsData: {

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

@@ -7,6 +7,7 @@ import {
   Wrapper,
 } from '@vue/test-utils'
 
+// eslint-disable-next-line max-statements
 describe('VSelect.ts', () => {
   type Instance = InstanceType<typeof VSelect>
   let mountFunction: (options?: object) => Wrapper<Instance>
@@ -35,6 +36,10 @@ describe('VSelect.ts', () => {
     }
   })
 
+  afterEach(() => {
+    document.body.removeChild(el)
+  })
+
   it('should select an item !multiple', async () => {
     const wrapper = mountFunction()
 
@@ -349,40 +354,58 @@ describe('VSelect.ts', () => {
   })
 
   // Inspired by https://github.com/vuetifyjs/vuetify/pull/1425 - Thanks @kevmo314
-  it('should open the select when focused and enter, space, up or down are pressed', async () => {
-    const wrapper = mountFunction()
+  it('should open the select when enter is pressed', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        items: ['foo', 'bar'],
+      },
+    })
 
-    wrapper.vm.hasMouseDown = true
-    wrapper.trigger('mouseup')
+    wrapper.find('input').trigger('keydown.enter')
+    await wrapper.vm.$nextTick()
 
-    expect(wrapper.vm.isMenuActive).toBe(false)
+    expect(document.body.querySelector('[data-app="true"]')).toMatchSnapshot()
+  })
 
-    wrapper.setProps({ filled: true })
-    wrapper.vm.hasMouseDown = true
-    wrapper.find('.v-input__slot').trigger('mouseup')
+  it('should open the select when space is pressed', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        items: ['foo', 'bar'],
+      },
+    })
 
-    expect(wrapper.vm.isMenuActive).toBe(true)
+    wrapper.find('input').trigger('keydown.space')
+    await wrapper.vm.$nextTick()
 
-    wrapper.setData({ isMenuActive: false })
-    wrapper.setProps({ filled: false, solo: true })
-    wrapper.vm.hasMouseDown = true
-    wrapper.find('.v-input__slot').trigger('mouseup')
+    expect(document.body.querySelector('[data-app="true"]')).toMatchSnapshot()
+  })
 
-    expect(wrapper.vm.isMenuActive).toBe(true)
+  it('should open the select is multiple and key up is pressed', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        multiple: true,
+        items: ['foo', 'bar'],
+      },
+    })
 
-    wrapper.setData({ isMenuActive: false })
-    wrapper.setProps({ solo: false, soloInverted: true })
-    wrapper.vm.hasMouseDown = true
-    wrapper.find('.v-input__slot').trigger('mouseup')
+    wrapper.find('input').trigger('keydown.up')
+    await wrapper.vm.$nextTick()
 
-    expect(wrapper.vm.isMenuActive).toBe(true)
+    expect(document.body.querySelector('[data-app="true"]')).toMatchSnapshot()
+  })
 
-    wrapper.setData({ isMenuActive: false })
-    wrapper.setProps({ soloInverted: false, outlined: true })
-    wrapper.vm.hasMouseDown = true
-    wrapper.find('.v-input__slot').trigger('mouseup')
+  it('should open the select is multiple and key down is pressed', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        multiple: true,
+        items: ['foo', 'bar'],
+      },
+    })
 
-    expect(wrapper.vm.isMenuActive).toBe(true)
+    wrapper.find('input').trigger('keydown.down')
+    await wrapper.vm.$nextTick()
+
+    expect(document.body.querySelector('[data-app="true"]')).toMatchSnapshot()
   })
 
   it('should return full items if using auto prop', async () => {

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

@@ -40,6 +40,10 @@ describe('VSelect.ts', () => {
     }
   })
 
+  afterEach(() => {
+    document.body.removeChild(el)
+  })
+
   // https://github.com/vuetifyjs/vuetify/issues/4359
   // Vue modifies the `on` property of the
   // computed `listData` — easiest way to fix