Add input event to InputNumber

[mertsincan]

The input event parses the value in the current input field and returns it to model. The value that comes to the model is the value that is not validated. This event is called every time one presses a key.

In current behavior, the model is updated in three ways;

1. Clicking outside to validate the change after changing something in inputNumber.
2. Changing the value using spinner's button/arrow keys
3. Pressing the 'enter' key

And the value that comes to the model is the value that is validated.

[Enoooch]

In my customized component, I did something like that.

<template lang="pug">
template(v-if="type === 'number'")
  InputNumber(v-model="value" @blur="validate()")
</template>

<script>
import { nextTick } from 'vue'

export default {
  setup (props) {
    const validate = async () => {
      if (props.type === 'number') {
        await nextTick()
        // value updated
        console.log(value.value)
      }
    }
  }
}
</script>

Hope it helps.

[Tom-Advocatia]

This has made the number input worthless in any of my projects. I always use the text input then deal with a bunch of string to formatted number conversions. This is the reason I usually tell folks, "Prime isn't built for professional forms, out of the box."

Thought I'd check in and see if there is an update, but it sounds like some sort of very silly stubbornness is keeping this in y'alls blind spot.

[FarizF]

I seems like you guys are causing continuous confusion by breaking standard, fundamental Vue input and v-model behavior as described here:

https://vuejs.org/guide/essentials/forms.html

Having to bind an event listener should not be necessary. It simply means more overhead. You guys have an awesome UI library, but at least for me, this is could definitely be a reason to switch to another.

Frankly, in my opinion, it is quite ridiculous that you guys found this normal for years, especially seeing the stubborn mentions to this issue and the respective complaints from other developers.

[NikolasBesner-SAQ]

The solution I found was to simply use the event and use the value:

Here is a example of the event ($event) returned from @input.

From what I see,
The $event.value is the current updated value.
The $event.formattedValue is the value before the input, in string form.

Therefore, my solution was :
<InputNumber v-model=quantity autofocus @input="onQuantityChange($event.value)"/>