fix(PrimeAutoComplete): improve v-model synchronization and handle paste events with local state

Author: sfxcode

dev/pages/inputs/AutoComplete.vue

@@ -57,8 +57,8 @@ const schema
     },
     {
       $formkit: 'primeAutoComplete',
-      id: 'chips',
-      name: 'chips',
+      id: 'chips2',
+      name: 'chips2',
       multiple: true,
       typeahead: false,
       label: 'Chips - Paste separated values by comma or semicolon',

src/components/PrimeAutoComplete.vue

@@ -1,9 +1,8 @@
 <script setup lang='ts'>
 import type { FormKitFrameworkContext } from '@formkit/core'
 import type { AutoCompleteCompleteEvent, AutoCompleteProps } from 'primevue/autocomplete'
-
 import type { PropType } from 'vue'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeAutoCompleteProps {
@@ -35,11 +34,30 @@ const suggestions = ref(['', {}])
 suggestions.value = []
 const loading = ref(false)
 
+// Local value for v-model
+const localValue = ref(props.context._value)
+
+// Sync localValue with context._value
+watch(
+  () => props.context._value,
+  (newVal) => {
+    localValue.value = newVal
+  },
+)
+
+// Emit changes from localValue to context
+watch(
+  localValue,
+  (newVal) => {
+    if (newVal !== props.context._value) {
+      props.context._value = newVal
+      props.context?.node?.input?.(newVal)
+    }
+  },
+)
+
 /**
  * Searches for suggestions based on the input query.
- * If options and optionLabel are provided, it filters the options.
- * Otherwise, it calls the complete function from the context to fetch suggestions.
- * @param event - The AutoCompleteCompleteEvent containing the query.
  */
 async function search(event: AutoCompleteCompleteEvent) {
   if (props.context?.options && props.context?.optionLabel) {
@@ -64,7 +82,6 @@ async function search(event: AutoCompleteCompleteEvent) {
 
 /**
  * Handles paste event to transform a string separated by any of the provided separators into multiple items.
- * @param event - The paste event from the input.
  */
 function handlePaste(event: ClipboardEvent) {
   if (!props.context?.multiple)
@@ -76,21 +93,20 @@ function handlePaste(event: ClipboardEvent) {
   const separators = Array.isArray(props.context?.separators) && props.context.separators.length > 0
     ? props.context.separators
     : [',']
-  // Create a regex to split by any separator, escaping special regex characters
   const regex = new RegExp(`[${separators.map(s => s.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')).join('')}]`)
   if (pastedText && regex.test(pastedText)) {
     event.preventDefault()
     const items = pastedText
       .split(regex)
       .map(item => item.trim())
       .filter(item => item.length > 0)
-    if (Array.isArray(props.context._value)) {
-      props.context._value.push(...items)
+    // Use a local ref, never mutate context._value directly
+    if (Array.isArray(localValue.value)) {
+      localValue.value = [...localValue.value, ...items]
     }
     else {
-      props.context._value = items
+      localValue.value = items
     }
-    props.context?.node?.input?.(props.context?._value)
   }
 }
 </script>
@@ -99,7 +115,7 @@ function handlePaste(event: ClipboardEvent) {
   <div class="p-formkit">
     <AutoComplete
       :id="context.id"
-      v-model="context._value"
+      v-model="localValue"
       v-bind="context?.attrs"
       :disabled="!!context?.disabled"
       :class="context?.attrs?.class"

src/composables/useFormKitRepeater.ts

@@ -10,9 +10,13 @@ export function useFormKitRepeater() {
   }
 
   function addListGroupFunctions(data: any, addNodeDefaultObject: object = {}) {
+    // Swap elements immutably
     const swapElements = (array: any[], index1: number, index2: number) => {
-      array[index1] = array.splice(index2, 1, array[index1])[0]
-      return array
+      const newArray = [...array]
+      const temp = newArray[index1]
+      newArray[index1] = newArray[index2]
+      newArray[index2] = temp
+      return newArray
     }
 
     data.addNode = (parentNode: any) => (): void => {