fix(NumberField/NumberFieldRoot): emit update:modelValue events after child input event (#1720) #1721
Conversation
… 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.
commit: |
|
@blakemann the component is design to only format the input when user is done with input. Thus you may see the Your proposal could be a feature prop, maybe we can start from there? 😁 |
|
@zernonia the formatting is still only applied when the user is done with the input with these changes - from a user perspective there is no difference in behaviour. This really just gives a bit more observability into the state of the input to a parent component in the uncommon case that it might need it - but for the most part will not be a noticeable change, which makes me wonder if adding complexity to the component by controlling this with a prop is worthwhile, but can consider it if necessary. Are there any downsides to having the |
Previously, the NumberFieldRoot component would only emit
update:modelValueevents when the child input element emitted achangeevent, which only occurs after the user has finished making changes and leaves the field. This is not consistent with the behaviour you would see on a native input where the value changes after everyinputevent, after each keypress and intermediary value entered.This PR makes changes to how the text value is displayed and how the model value is emitted, allowing the model value to emit more frequently as the user types (after an
inputevent occurs), while not affecting the existing behaviour of when any formatting, clamping, or snapping is applied to the displayed value.Additionally, the emitted model value pre-calculates any clamping or snapping to ensure that it reflects what the displayed text value will change to if the user were to hit 'enter' or leave the field.
This is done by removing the existing
computedproperty which tied the displayed text value firmly to the current model value, and instead uses a watcher which can react to changes in any prop values that affect the text value, but selectively ignore a change when it is known to be caused by a user input which may not yet be fully complete.Addresses #1720