fix(NumberField): increment/decrement not respecting the user current…

… input (#968)

* fix: detect latest input value when changed and increment/decrement accordingly

* test: add case where the input was changed via js

packages/radix-vue/src/NumberField/NumberField.test.ts

@@ -210,6 +210,28 @@ describe('numberField', () => {
       expect(input.value).toBe('20')
     })
   })
+
+  describe('given setting the input value manually', async () => {
+    it('should it increase/decrease the value appropriately', async () => {
+      const { input, increment, decrement } = setup({ defaultValue: 6 })
+
+      input.value = '100'
+      await userEvent.click(increment)
+      expect(input.value).toBe('101')
+
+      input.value = '100'
+      await userEvent.click(decrement)
+      expect(input.value).toBe('99')
+
+      input.value = ''
+      await userEvent.click(decrement)
+      expect(input.value).toBe('0')
+
+      input.value = '0'
+      await userEvent.click(decrement)
+      expect(input.value).toBe('-1')
+    })
+  })
 })
 
 describe('given checkbox in a form', async () => {

packages/radix-vue/src/NumberField/NumberFieldRoot.vue

@@ -93,16 +93,17 @@ const isIncreaseDisabled = computed(() => (
 )
 
 function handleChangingValue(type: 'increase' | 'decrease', multiplier = 1) {
+  const currentInputValue = numberParser.parse(inputEl.value?.value ?? '')
   if (props.disabled)
     return
-  if (isNaN(modelValue.value)) {
+  if (isNaN(currentInputValue)) {
     modelValue.value = min.value ?? 0
   }
   else {
     if (type === 'increase')
-      modelValue.value = clampInputValue(modelValue.value + ((step.value ?? 1) * multiplier))
+      modelValue.value = clampInputValue(currentInputValue + ((step.value ?? 1) * multiplier))
     else
-      modelValue.value = clampInputValue(modelValue.value - ((step.value ?? 1) * multiplier))
+      modelValue.value = clampInputValue(currentInputValue - ((step.value ?? 1) * multiplier))
   }
 }
 
@@ -163,11 +164,9 @@ function applyInputValue(val: string) {
   const parsedValue = numberParser.parse(val)
 
   modelValue.value = clampInputValue(parsedValue)
-
   // Set to empty state if input value is empty
-  if (!val.length) {
+  if (!val.length)
     return setInputValue(val)
-  }
 
   // if it failed to parse, then reset input to formatted version of current number
   if (isNaN(parsedValue))