fix(VCombobox): handle duplicates on chip edit (#13794)

Fixes #6364
vuetifyjs · Jul 19, 2021 · 7fac117 · 7fac117
1 parent 31d610f
commit 7fac117
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 2 deletions.
diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.ts b/packages/vuetify/src/components/VCombobox/VCombobox.ts
@@ -188,11 +188,25 @@ export default VAutocomplete.extend({
     },
     updateEditing () {
       const value = this.internalValue.slice()
-      value[this.editingIndex] = this.internalSearch
+      const index = this.selectedItems.findIndex(item =>
+        this.getText(item) === this.internalSearch)
 
-      this.setValue(value)
+      // If user enters a duplicate text on chip edit,
+      // don't add it, move it to the end of the list
+      if (index > -1) {
+        const item = typeof value[index] === 'object'
+          ? Object.assign({}, value[index])
+          : value[index]
+
+        value.splice(index, 1)
+        value.push(item)
+      } else {
+        value[this.editingIndex] = this.internalSearch
+      }
 
+      this.setValue(value)
       this.editingIndex = -1
+      this.internalSearch = null
     },
     updateCombobox () {
       // If search is not dirty, do nothing

diff --git a/packages/vuetify/src/components/VCombobox/__tests__/VCombobox-multiple.spec.ts b/packages/vuetify/src/components/VCombobox/__tests__/VCombobox-multiple.spec.ts
@@ -548,4 +548,34 @@ describe('VCombobox.ts', () => {
 
     expect(change).toHaveBeenLastCalledWith([{ text: 'foo', value: 'foo' }])
   })
+
+  // https://github.com/vuetifyjs/vuetify/issues/6364
+  it('should not add duplicate chip after edit', async () => {
+    const { wrapper, change } = createMultipleCombobox({
+      chips: true,
+      multiple: true,
+      clearable: true,
+      items: ['foo', 'bar'],
+      value: ['foo', 'bar'],
+    })
+
+    const input = wrapper.find('input')
+    const element = input.element as HTMLInputElement
+
+    // Dbl click chip at index 1
+    const chip = wrapper.findAll('.v-chip').at(1)
+    chip.trigger('dblclick')
+    expect(wrapper.vm.editingIndex).toBe(1)
+    expect(wrapper.vm.internalSearch).toBe('bar')
+
+    // Add a duplicate value - 'foo'
+    input.trigger('focus')
+    element.value = 'foo'
+    input.trigger('input')
+    await wrapper.vm.$nextTick()
+    input.trigger('keydown.enter')
+    await wrapper.vm.$nextTick()
+
+    expect(change).toHaveBeenLastCalledWith(['bar', 'foo'])
+  })
 })