feat(VCombobox): create new items when pasting with line breaks (#22304)

fixes #10813

Author: ikushum

packages/vuetify/src/components/VCombobox/VCombobox.tsx

@@ -165,16 +165,9 @@ export const VCombobox = genericComponent<new <
         }
 
         if (val && props.multiple && props.delimiters?.length) {
-          const signsToMatch = props.delimiters.map(escapeForRegex).join('|')
-          const values = val.split(new RegExp(`(?:${signsToMatch})+`))
+          const values = splitByDelimiters(val)
           if (values.length > 1) {
-            for (let v of values) {
-              v = v.trim()
-              if (v) {
-                select(transformItem(props, v))
-                await nextTick()
-              }
-            }
+            selectMultiple(values)
             _search.value = ''
           }
         }
@@ -364,6 +357,15 @@ export const VCombobox = genericComponent<new <
         selectionIndex.value = -1
       }
     }
+    function onPaste (e: ClipboardEvent) {
+      const clipboardText = e?.clipboardData?.getData('Text') ?? ''
+      const values = splitByDelimiters(clipboardText)
+
+      if (values.length > 1 && props.multiple) {
+        e.preventDefault()
+        selectMultiple(values)
+      }
+    }
     function onAfterEnter () {
       if (props.eager) {
         vVirtualScrollRef.value?.calculateVisibleItems()
@@ -410,7 +412,20 @@ export const VCombobox = genericComponent<new <
         })
       }
     }
-
+    function splitByDelimiters (val: string) {
+      const effectiveDelimiters = ['\n', ...props.delimiters ?? []]
+      const signsToMatch = effectiveDelimiters.map(escapeForRegex).join('|')
+      return val.split(new RegExp(`(?:${signsToMatch})+`))
+    }
+    async function selectMultiple (values: string[]) {
+      for (let value of values) {
+        value = value.trim()
+        if (value) {
+          select(transformItem(props, value))
+          await nextTick()
+        }
+      }
+    }
     function onFocusin (e: FocusEvent) {
       isFocused.value = true
       setTimeout(() => {
@@ -500,6 +515,7 @@ export const VCombobox = genericComponent<new <
           onClick:clear={ onClear }
           onMousedown:control={ onMousedownControl }
           onKeydown={ onKeydown }
+          onPaste={ onPaste }
           aria-expanded={ ariaExpanded.value }
           aria-controls={ ariaControls.value }
         >

packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.browser.tsx

@@ -802,6 +802,22 @@ describe('VCombobox', () => {
     await expect.poll(() => screen.queryAllByRole('option')).toHaveLength(1)
   })
 
+  it('should create new items when pasting with line break characters', async () => {
+    const model = ref(null)
+    render(() => (
+      <VCombobox
+        v-model={ model.value }
+        multiple
+        delimiters={[',']}
+      />
+    ))
+
+    await userEvent.tab()
+    navigator.clipboard.writeText('foo,\nbar')
+    await userEvent.paste()
+    expect(model.value).toEqual(['foo', 'bar'])
+  })
+
   describe('Showcase', () => {
     generate({ stories })
   })