Is it some kind of server-side validation scenario?
Let me know what do you think about this example

Is it some kind of server-side validation scenario? Let me know what do you think about this example

Hi @J-Sek thanks for picking up this issue and replying. I checked the example you provided and that's really helpful but in my scenario,

1. User needs to press enter or blur the field to update the value (send API request with the newly entered value) after typing.
2. Or user can click increment / decrement buttons send the API request right away with the newly changed value.

That's why I need to handle the increment and decrement button change separately.

@J-Sek Please let me know if you need further clarifications

You probably want to respond to keyboard up/down too right? Would watch(count, (a, b) => { if (Math.abs(a - b) === 1) run() }) solve your problem?

@gayanSandamal OK, so it is not the validation, but a "send to the backend" and you want to handle up/down control clicks (not the keybroad actions) without waiting for blur because in the user's mind he is not typing and expects results to be effective immediately.

VNumberInput captures clicks on up/down controls, so there is no way to get this behavior. I needed to swap component with rudimentary implementation for this example to work. Please excuse poor debounce.. in real life, you would probably need something better to handle race conditions.

You probably want to respond to keyboard up/down too right? Would watch(count, (a, b) => { if (Math.abs(a - b) === 1) run() }) solve your problem?

When I was developing our component I did something similar to what you mentioned above to achieve the expected behaviour

https://github.com/FlowFuse/node-red-dashboard/blob/6015c0f9fadc39bcc79dae28c40dbc538c2a92a5/ui/src/widgets/ui-number-input/UINumberInput.vue#L144

@gayanSandamal OK, so it is not the validation, but a "send to the backend" and you want to handle up/down control clicks (not the keybroad actions) without waiting for blur because in the user's mind he is not typing and expects results to be effective immediately.

VNumberInput captures clicks on up/down controls, so there is no way to get this behavior. I needed to swap component with rudimentary implementation for this example to work. Please excuse poor debounce.. in real life, you would probably need something better to handle race conditions.

Thanks a lot @J-Sek I've achieved the expected behaviour by doing something hackie here and it's similar that @KaelWD showed in his comment because I was in a rush to get that done.

I will try with your new example because it's more cleaner than what I've done at the moment.

Also I will close this issue as it's resolved