From ad43ecfc4527dc838d8742b066dd07bab72913c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vojt=C4=9Bch=20Plocica?= <vojta.plocica@seznam.cz>
Date: Thu, 19 Dec 2024 15:48:45 +0100
Subject: [PATCH] fix(TagsInput): avoid mutating modelValue directly (#1509)

* fix: #1508

* Update TagsInputRoot.vue

* fix(TagsInputRoot): fix errors
---
 packages/radix-vue/src/TagsInput/TagsInputRoot.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/radix-vue/src/TagsInput/TagsInputRoot.vue b/packages/radix-vue/src/TagsInput/TagsInputRoot.vue
index 48e545110..4caf13478 100644
--- a/packages/radix-vue/src/TagsInput/TagsInputRoot.vue
+++ b/packages/radix-vue/src/TagsInput/TagsInputRoot.vue
@@ -124,13 +124,13 @@ provideTagsInputRootContext({
     }
 
     if (props.duplicate) {
-      modelValue.value.push(payload)
+      modelValue.value = [...modelValue.value, payload]
       return true
     }
     else {
       const exist = modelValue.value.includes(payload)
       if (!exist) {
-        modelValue.value.push(payload)
+        modelValue.value = [...modelValue.value, payload]
         return true
       }
       else {
@@ -142,7 +142,7 @@ provideTagsInputRootContext({
   },
   onRemoveValue: (index) => {
     if (index !== -1)
-      modelValue.value.splice(index, 1)
+      modelValue.value = modelValue.value.filter((_, i) => i !== index)
   },
   onInputKeydown: (event) => {
     const target = event.target as HTMLInputElement
@@ -158,7 +158,7 @@ provideTagsInputRootContext({
 
         if (selectedElement.value) {
           const index = collection.findIndex(i => i === selectedElement.value)
-          modelValue.value.splice(index, 1)
+          modelValue.value = modelValue.value.filter((_, i) => i !== index)
           selectedElement.value = selectedElement.value === lastTag ? collection.at(index - 1) : collection.at(index + 1)
           event.preventDefault()
         }