feat(VCombobox): add item:created & item:deleted events

events emit when an item enters or leaves the selection resolves #5682
vuetifyjs · May 5, 2020 · 2f2838d · 2f2838d
1 parent b82d601
commit 2f2838d
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.ts b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.ts
@@ -263,6 +263,7 @@ export default VSelect.extend({
         this.selectItem(curItem)
       }
 
+      this.$emit('item:deleted', curItem)
       this.selectedIndex = nextIndex
     },
     clearableCallback () {

diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.ts b/packages/vuetify/src/components/VCombobox/VCombobox.ts
@@ -16,11 +16,11 @@ export default VAutocomplete.extend({
   name: 'v-combobox',
 
   props: {
-    createItem: Function,
     delimiters: {
       type: Array as PropType<string[]>,
       default: () => ([]),
     },
+    itemMutate: Function,
     returnObject: {
       type: Boolean,
       default: true,
@@ -223,18 +223,20 @@ export default VAutocomplete.extend({
         internalValue.splice(index, 1)
 
         this.setValue(internalValue)
-      } else if (typeof this.createItem === 'function') {
+      } else if (typeof this.itemMutate === 'function') {
         // If we hit this conditional, the user
         // provided a custom mutator function
-        internalSearch = this.createItem(internalSearch)
+        internalSearch = this.itemMutate(internalSearch)
       }
 
       // If menu index is greater than 1
       // the selection is handled elsewhere
       // TODO: find out where
-      if (menuIndex > -1) return (this.internalSearch = null)
+      if (menuIndex < 0) {
+        this.selectItem(internalSearch)
+        this.$emit('item:created', internalSearch)
+      }
 
-      this.selectItem(internalSearch)
       this.internalSearch = null
     },
     onPaste (event: ClipboardEvent) {

diff --git a/packages/vuetify/src/components/VCombobox/__tests__/VCombobox-multiple.spec.ts b/packages/vuetify/src/components/VCombobox/__tests__/VCombobox-multiple.spec.ts
@@ -49,7 +49,9 @@ describe('VCombobox.ts', () => {
   }
 
   it('should create new values when tagging', async () => {
+    const itemCreated = jest.fn()
     const { wrapper, change } = createMultipleCombobox({})
+    wrapper.vm.$on('item:created', itemCreated)
 
     const input = wrapper.find('input')
     const element = input.element as HTMLInputElement
@@ -62,6 +64,7 @@ describe('VCombobox.ts', () => {
     await wrapper.vm.$nextTick()
 
     expect(change).toHaveBeenCalledWith(['foo'])
+    expect(itemCreated).toHaveBeenCalledWith('foo')
   })
 
   it('should change selectedIndex with keyboard', async () => {
@@ -82,9 +85,11 @@ describe('VCombobox.ts', () => {
   })
 
   it('should delete a tagged item when selected and backspace/delete is pressed', async () => {
+    const itemDeleted = jest.fn()
     const { wrapper, change } = createMultipleCombobox({
       value: ['foo', 'bar'],
     })
+    wrapper.vm.$on('item:deleted', itemDeleted)
 
     const input = wrapper.find('input')
 
@@ -104,6 +109,7 @@ describe('VCombobox.ts', () => {
     await wrapper.vm.$nextTick()
     expect(change).toHaveBeenCalledWith([])
     expect(wrapper.vm.selectedIndex).toBe(-1)
+    expect(itemDeleted).toHaveBeenCalledWith('foo')
   })
 
   it('should add a tag on enter using the current searchValue', async () => {
@@ -409,7 +415,7 @@ describe('VCombobox.ts', () => {
 
   it('should apply user provided callback when using the create-item prop', async () => {
     const { wrapper, change } = createMultipleCombobox({
-      createItem: value => ({ text: value, value }),
+      itemMutate: value => ({ text: value, value }),
     })
 
     const input = wrapper.find('input')