fix(NumberField): always updateModelValue on blur (#954)

* fix(NumberField): always updateModelValue on blur

* chore(NumberField): add test

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

@@ -21,7 +21,7 @@ function setup(props?: NumberFieldRootProps) {
 }
 
 const kbd = useKbd()
-describe('NumberField', () => {
+describe('numberField', () => {
   it('should pass axe accessibility tests', async () => {
     const { root } = setup()
     expect(await axe(root)).toHaveNoViolations()
@@ -42,6 +42,17 @@ describe('NumberField', () => {
     expect(input.value).toBe('-10')
   })
 
+  it('should restart from 0 when clearing the value', async () => {
+    const { input, increment } = setup({ defaultValue: 5 })
+
+    await userEvent.clear(input)
+
+    expect(input.value).toBe('')
+    await userEvent.click(document.body)
+    await userEvent.click(increment)
+    expect(input.value).toBe('0')
+  })
+
   it('should increase and decrease based on default step', async () => {
     const { input, increment, decrement } = setup({ defaultValue: 10 })
     expect(input.value).toBe('10')

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

@@ -160,19 +160,19 @@ function clampInputValue(val: number) {
 }
 
 function applyInputValue(val: string) {
-  if (!val)
-    return
-
   const parsedValue = numberParser.parse(val)
+
+  modelValue.value = clampInputValue(parsedValue)
+
   // Set to empty state if input value is empty
-  if (!val.length)
-    return setInputValue(modelValue.value === undefined ? '' : textValue.value)
+  if (!val.length) {
+    return setInputValue(val)
+  }
 
   // if it failed to parse, then reset input to formatted version of current number
   if (isNaN(parsedValue))
     return setInputValue(textValue.value)
 
-  modelValue.value = clampInputValue(parsedValue)
   return setInputValue(textValue.value)
 }