feat(VCombobox): add create-item prop to mutate new items

resolves #5682
vuetifyjs · May 5, 2020 · b82d601 · b82d601
1 parent 832d618
commit b82d601
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 2 deletions.
diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.ts b/packages/vuetify/src/components/VCombobox/VCombobox.ts
@@ -16,6 +16,7 @@ export default VAutocomplete.extend({
   name: 'v-combobox',
 
   props: {
+    createItem: Function,
     delimiters: {
       type: Array as PropType<string[]>,
       default: () => ([]),
@@ -208,7 +209,12 @@ export default VAutocomplete.extend({
         return this.updateEditing()
       }
 
-      const index = this.selectedItems.indexOf(this.internalSearch)
+      let internalSearch = this.internalSearch
+
+      const index = this.selectedItems.findIndex(item => {
+        return this.getValue(item) === internalSearch
+      })
+
       // If it already exists, do nothing
       // this might need to change to bring
       // the duplicated item to the last entered
@@ -217,14 +223,18 @@ export default VAutocomplete.extend({
         internalValue.splice(index, 1)
 
         this.setValue(internalValue)
+      } else if (typeof this.createItem === 'function') {
+        // If we hit this conditional, the user
+        // provided a custom mutator function
+        internalSearch = this.createItem(internalSearch)
       }
 
       // If menu index is greater than 1
       // the selection is handled elsewhere
       // TODO: find out where
       if (menuIndex > -1) return (this.internalSearch = null)
 
-      this.selectItem(this.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
@@ -406,4 +406,25 @@ describe('VCombobox.ts', () => {
     expect(wrapper.vm.internalSearch).toBe('a')
     expect(change).toHaveBeenCalledWith(['aaa'])
   })
+
+  it('should apply user provided callback when using the create-item prop', async () => {
+    const { wrapper, change } = createMultipleCombobox({
+      createItem: value => ({ text: value, value }),
+    })
+
+    const input = wrapper.find('input')
+    const element = input.element as HTMLInputElement
+
+    input.trigger('focus')
+    element.value = 'foo'
+    input.trigger('input')
+    input.trigger('keydown.enter')
+
+    await wrapper.vm.$nextTick()
+
+    expect(change).toHaveBeenCalledWith([{
+      text: 'foo',
+      value: 'foo',
+    }])
+  })
 })