fix(NumberField/NumberFieldRoot): emit update:modelValue events after child input event (unovue#1720)

The input event fires more frequently, after each keypress than the currently used change event.

Creates consistency with how a native number input would integrate with v-model.

Author: blakemann

packages/core/src/NumberField/NumberField.test.ts

@@ -263,6 +263,29 @@ describe('numberField', () => {
       await fireEvent.keyDown(input, { key: kbd.ENTER })
       expect(input.value).toBe('EUR 7.00')
     })
+
+    it('should correctly update model value independently of formatting', async () => {
+      const { input, emitted } = setup({
+        defaultValue: 100,
+      })
+
+      // after update, both internal and displayed value are not formatted
+      await fireEvent.update(input, '1000')
+      expect(input.value).toBe('1000')
+      expect(emitted('update:model-value')[0]).toEqual([1000])
+      // update:model-value fired after each consecutive update
+      await fireEvent.update(input, '10000')
+      expect(input.value).toBe('10000')
+      expect(emitted('update:model-value')[1]).toEqual([10000])
+      // on 'enter' key press formatting is applied to text, model value does not change
+      await fireEvent.keyDown(input, { key: kbd.ENTER })
+      expect(input.value).toBe('10,000')
+      expect(emitted('update:model-value').length).toBe(2)
+      // update:model-value always sends non-formatted value even if current text is formatted
+      await fireEvent.update(input, '10,001')
+      expect(input.value).toBe('10,001')
+      expect(emitted('update:model-value')[2]).toEqual([10001])
+    })
   })
 })
 

packages/core/src/NumberField/NumberFieldInput.vue

@@ -93,6 +93,7 @@ function handleChange() {
     @input="(event: InputEvent) => {
       const target = event.target as HTMLInputElement
       inputValue = target.value
+      rootContext.applyInputValue(target.value, false)
     }"
     @change="handleChange"
     @keydown.enter="rootContext.applyInputValue($event.target?.value)"

packages/core/src/NumberField/NumberFieldRoot.vue

@@ -2,7 +2,7 @@
 import type { PrimitiveProps } from '@/Primitive'
 import { useVModel } from '@vueuse/core'
 import { clamp, createContext, snapValueToStep, useFormControl, useLocale } from '@/shared'
-import { type HTMLAttributes, type Ref, computed, ref, toRefs } from 'vue'
+import { type HTMLAttributes, type Ref, computed, ref, toRefs, watch } from 'vue'
 import type { FormFieldProps } from '@/shared/types'
 
 export interface NumberFieldRootProps extends PrimitiveProps, FormFieldProps {
@@ -40,7 +40,7 @@ interface NumberFieldRootContext {
   inputMode: Ref<HTMLAttributes['inputmode']>
   textValue: Ref<string>
   validate: (val: string) => boolean
-  applyInputValue: (val: string) => void
+  applyInputValue: (val: string, format?: boolean) => void
   disabled: Ref<boolean>
   max: Ref<number | undefined>
   min: Ref<number | undefined>
@@ -68,7 +68,7 @@ const props = withDefaults(defineProps<NumberFieldRootProps>(), {
   stepSnapping: true,
 })
 const emits = defineEmits<NumberFieldRootEmits>()
-const { disabled, min, max, step, stepSnapping, formatOptions, id, locale: propLocale } = toRefs(props)
+const { disabled, defaultValue, min, max, step, stepSnapping, formatOptions, id, locale: propLocale } = toRefs(props)
 
 const modelValue = useVModel(props, 'modelValue', emits, {
   defaultValue: props.defaultValue,
@@ -80,6 +80,8 @@ const { primitiveElement, currentElement } = usePrimitiveElement()
 const locale = useLocale(propLocale)
 const isFormControl = useFormControl(currentElement)
 const inputEl = ref<HTMLInputElement>()
+const textValue = ref<string>('')
+let skipFormatNextUpdate: boolean = false
 
 const isDecreaseDisabled = computed(() => (
   clampInputValue(modelValue.value) === min.value
@@ -136,7 +138,18 @@ const inputMode = computed<HTMLAttributes['inputmode']>(() => {
 // Replace negative textValue formatted using currencySign: 'accounting'
 // with a textValue that can be announced using a minus sign.
 const textValueFormatter = useNumberFormatter(locale, formatOptions)
-const textValue = computed(() => isNaN(modelValue.value) ? '' : textValueFormatter.format(modelValue.value))
+
+updateTextValue(modelValue.value)
+
+watch([modelValue, defaultValue, formatOptions, propLocale], () => {
+  if (!skipFormatNextUpdate)
+    updateTextValue(modelValue.value)
+  skipFormatNextUpdate = false
+})
+
+function updateTextValue(value: number | null) {
+  textValue.value = (value === null || isNaN(value)) ? '' : textValueFormatter.format(value)
+}
 
 function validate(val: string) {
   return numberParser.isValidPartialNumber(val, min.value, max.value)
@@ -159,10 +172,16 @@ function clampInputValue(val: number) {
   return clampedValue
 }
 
-function applyInputValue(val: string) {
+function applyInputValue(val: string, format: boolean = true) {
   const parsedValue = numberParser.parse(val)
 
+  // if formatting not requested, set flag to skip formatting in the watcher before updating the value
+  if (!format)
+    skipFormatNextUpdate = true
   modelValue.value = clampInputValue(parsedValue)
+  // if formatting is requested, force a text value update here in case the current value is the same as previous
+  if (format)
+    updateTextValue(modelValue.value)
   // Set to empty state if input value is empty
   if (!val.length)
     return setInputValue(val)

packages/core/src/NumberField/story/_NumberField.vue

@@ -4,6 +4,7 @@ import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFie
 import { Icon } from '@iconify/vue'
 
 const props = defineProps<NumberFieldRootProps>()
+const emit = defineEmits(['update:model-value'])
 </script>
 
 <template>
@@ -12,6 +13,7 @@ const props = defineProps<NumberFieldRootProps>()
     id="number-field"
     data-testid="root"
     class="text-sm flex items-center border bg-blackA7 border-blackA9 rounded-md text-white"
+    @update:model-value="emit('update:model-value', $event)"
   >
     <label
       for="number-field"