From 0f732396f90e10b6e72a62e3a8f785a9f0d3bbd6 Mon Sep 17 00:00:00 2001
From: zernonia <59365435+zernonia@users.noreply.github.com>
Date: Thu, 19 Dec 2024 11:04:37 +0800
Subject: [PATCH] fix(NumberField): input value was reset when attribute
 changes (#1506)

* fix(NumberField): input value was reset when attribute changes

* chore: clean up binding
---
 .../src/NumberField/NumberFieldInput.vue      | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/radix-vue/src/NumberField/NumberFieldInput.vue b/packages/radix-vue/src/NumberField/NumberFieldInput.vue
index 5fe2810bd..68706ce3e 100644
--- a/packages/radix-vue/src/NumberField/NumberFieldInput.vue
+++ b/packages/radix-vue/src/NumberField/NumberFieldInput.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { PrimitiveProps } from '@/Primitive'
 import { injectNumberFieldRootContext } from './NumberFieldRoot.vue'
-import { onMounted } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 
 export interface NumberFieldInputProps extends PrimitiveProps {
 }
@@ -39,6 +39,17 @@ function handleWheelEvent(event: WheelEvent) {
 onMounted(() => {
   rootContext.onInputElement(currentElement.value as HTMLInputElement)
 })
+
+const inputValue = ref(rootContext.textValue.value)
+watch(() => rootContext.textValue.value, () => {
+  inputValue.value = rootContext.textValue.value
+}, { immediate: true, deep: true })
+
+function handleChange() {
+  requestAnimationFrame(() => {
+    inputValue.value = rootContext.textValue.value
+  })
+}
 </script>
 
 <template>
@@ -46,10 +57,10 @@ onMounted(() => {
     v-bind="props"
     :id="rootContext.id.value"
     ref="primitiveElement"
+    :value="inputValue"
     role="spinbutton"
     type="text"
     tabindex="0"
-    :value="rootContext.textValue.value"
     :inputmode="rootContext.inputMode.value"
     :disabled="rootContext.disabled.value ? '' : undefined"
     :data-disabled="rootContext.disabled.value ? '' : undefined"
@@ -78,6 +89,11 @@ onMounted(() => {
       if (!rootContext.validate(nextValue))
         event.preventDefault()
     }"
+    @input="(event: InputEvent) => {
+      const target = event.target as HTMLInputElement
+      inputValue = target.value
+    }"
+    @change="handleChange"
     @keydown.enter="rootContext.applyInputValue($event.target?.value)"
     @blur="rootContext.applyInputValue($event.target?.value)"
   >