[Bug]: NumberFieldRoot does not emit update:modelValue events while user is typing

[blakemann]

Environment

Node version: 18.19.1
Package manager: yarn@1.22.22
Reka UI version: 2.1.0
Vue version: 3.5.13
Client OS: Windows 10 19045.5608
Browser: Chrome 134.0.6998.89

Link to minimal reproduction

https://codesandbox.io/p/devbox/reka-ui-numberfield-forked-8yd5fd?workspaceId=ws_NdaS5AXB6ZiaVxtpjP9vmS

Steps to reproduce

Implement a Number Field component into a parent and provide a modelValue prop and listen for update:modelValue events within the parent, and log or display the updated value on event.

Click into the field and begin typing - no events will be fired. Click out of the field to cause a change event to trigger. Only now does the event fire.

Describe the bug

This may be debatable if this is a bug or intended functionality, and I am happy to close if the latter is decided.

If you use v-model on a native input with type="number" you will find that the model value is changed dynamically while typing in the field (ie, if I click into the field and type 123 and observe the model value, I will see it subsequently change to 1, then 12, then 123.

The Reka UI Number Field does not behave in the same way, as it currently only will update the model value on a change event (aside from updates caused by wheel spin, arrow keys, increment/decrement buttons, etc.) which is only fired when focus leaves the field (which is also when formatting/clamping is applied to the user entered value). In this case, if I type 123 and observe the model value, I will only see it change once, straight to 123.

This can be somewhat limiting in cases where a UI might respond dynamically to value changes while a user is typing in a field.

It is my opinion that this component should behave more consistently with a native number input, and emit update:modelValue events after every input event instead of only on change events (effectively, after every keypress). I'm not suggesting making any changes to when formatting/clamping/snapping is applied to the field, as the current behaviour is ideal and prevents things from changing while the user is still in the middle of making edits... however, the component can still pre-calculate what the formatted/clamped/snapped value will be and emit those events while the user types.

I have implemented changes to address this and will open a PR shortly.

Expected behavior

NumberFieldRoot component emits update:modelValue events when the child input element emits an input event, instead of only on change event.

The value provided in the emitted events continues to be formatted/clamped/snapped the same way as it does currently on change.

The display of the value in the field is decoupled from the modelValue so that formatting/clamping/snapping continues to only apply after a change event (despite the modelValue changing more frequently)

Context & Screenshots (if applicable)

No response