fix(NumberField): sync display text when value changes while focused

Increment/decrement buttons updated the model but left the input's
display text stale when the control was focused. On blur the stale
text overwrote the model, reverting the change.

Remove the isFocused guard from the value watcher so syncText always
runs. This is safe because typing only mutates text directly and never
triggers the watcher.

Closes #189

Author: johnleider

packages/0/src/components/NumberField/NumberFieldControl.vue

@@ -66,11 +66,7 @@
 
   onMounted(syncText)
 
-  watch(() => root.value.value, () => {
-    if (!root.isFocused.value) {
-      syncText()
-    }
-  })
+  watch(() => root.value.value, syncText)
 
   const displayValue = toRef(() => {
     return root.isFocused.value ? text.value : root.display.value

packages/0/src/components/NumberField/index.test.ts

@@ -29,16 +29,21 @@ function mountNumberField (options: {
 } = {}): MountResult {
   let capturedRootProps: any
 
-  const wrapper = mount(NumberField.Root, {
-    props: {
-      ...(options.model && {
-        'modelValue': options.model.value,
-        'onUpdate:modelValue': (v: unknown) => {
-          options.model!.value = v as number | null
-        },
-      }),
-      ...options.props,
-    },
+  let wrapper: VueWrapper
+
+  const props: Record<string, unknown> = {
+    ...(options.model && {
+      'modelValue': options.model.value,
+      'onUpdate:modelValue': (v: unknown) => {
+        options.model!.value = v as number | null
+        wrapper.setProps({ modelValue: v })
+      },
+    }),
+    ...options.props,
+  }
+
+  wrapper = mount(NumberField.Root, {
+    props,
     slots: {
       default: (rootProps: any) => {
         capturedRootProps = rootProps
@@ -214,6 +219,49 @@ describe('number-field', () => {
       expect(model.value).toBe(0)
     })
 
+    it('should update display when incrementing while focused', async () => {
+      const model = ref<number | null>(5)
+      const { rootProps, controlEl, incrementEl, wait } = mountNumberField({
+        model,
+        props: { min: 0, max: 10, step: 1 },
+      })
+      await wait()
+
+      await controlEl().trigger('focus')
+      await wait()
+      expect(rootProps().isFocused).toBe(true)
+
+      await incrementEl().trigger('pointerdown', { button: 0 })
+      await incrementEl().trigger('pointerup')
+      await wait()
+
+      expect(model.value).toBe(6)
+      expect(rootProps().value).toBe(6)
+      expect(rootProps().display).toBe('6')
+    })
+
+    it('should preserve incremented value after blur', async () => {
+      const model = ref<number | null>(5)
+      const { controlEl, incrementEl, wait } = mountNumberField({
+        model,
+        props: { min: 0, max: 10, step: 1 },
+      })
+      await wait()
+
+      await controlEl().trigger('focus')
+      await wait()
+
+      await incrementEl().trigger('pointerdown', { button: 0 })
+      await incrementEl().trigger('pointerup')
+      await wait()
+      await wait()
+
+      await controlEl().trigger('blur')
+      await wait()
+
+      expect(model.value).toBe(6)
+    })
+
     it('should respect step size', async () => {
       const model = ref<number | null>(10)
       const { incrementEl, wait } = mountNumberField({