fix(VCombobox): select all values from pasted text (#21840)

resolves #21838

Author: J-Sek

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

@@ -32,6 +32,7 @@ import {
   checkPrintable,
   deepEqual,
   ensureValidVNode,
+  escapeForRegex,
   genericComponent,
   IN_BROWSER,
   isComposingIgnoreKey,
@@ -153,20 +154,24 @@ export const VCombobox = genericComponent<new <
       get: () => {
         return _search.value
       },
-      set: (val: string | null) => {
+      set: async (val: string | null) => {
         _search.value = val ?? ''
         if (!props.multiple && !hasSelectionSlot.value) {
           model.value = [transformItem(props, val)]
           nextTick(() => vVirtualScrollRef.value?.scrollToIndex(0))
         }
 
         if (val && props.multiple && props.delimiters?.length) {
-          const values = val.split(new RegExp(`(?:${props.delimiters.join('|')})+`))
+          const signsToMatch = props.delimiters.map(escapeForRegex).join('|')
+          const values = val.split(new RegExp(`(?:${signsToMatch})+`))
           if (values.length > 1) {
-            values.forEach(v => {
+            for (let v of values) {
               v = v.trim()
-              if (v) select(transformItem(props, v))
-            })
+              if (v) {
+                select(transformItem(props, v))
+                await nextTick()
+              }
+            }
             _search.value = ''
           }
         }

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

@@ -746,6 +746,25 @@ describe('VCombobox', () => {
     expect(onFocus).toHaveBeenCalledTimes(1)
   })
 
+  it.each([
+    { delimiters: [','], text: 'abc,foo, baz', expected: ['abc', 'foo', 'baz'] },
+    { delimiters: [':'], text: '012:2,32:0:1', expected: ['012', '2,32', '0', '1'] },
+    { delimiters: [':', '.', '-'], text: '(1) 231:13 - 123.', expected: ['(1) 231', '13', '123'] },
+  ])('should ingest new items when a delimited text is pasted', async ({ delimiters, text, expected }) => {
+    const model = ref(null)
+    render(() => (
+      <VCombobox
+        v-model={ model.value }
+        delimiters={ delimiters }
+        multiple
+      />
+    ))
+    await userEvent.tab()
+    navigator.clipboard.writeText(text)
+    await userEvent.paste()
+    expect(model.value).toEqual(expected)
+  })
+
   describe('Showcase', () => {
     generate({ stories })
   })