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)"/>

[MilenaMalysh]

@input="modelValue = $event.value as number"
hack works like a charm. But if you also want to have the validation (e.g. for max/min values) on input event, you could also do:

function refocus($event: InputNumberInputEvent) {
  const target = $event.originalEvent.target as HTMLElement;
  target.blur();
  target.focus();
}

<InputNumber
      v-model="modelValue"
      mode="decimal"
      show-buttons
      :min="0"
      :step="0.01"
      :max="maxStep"
      :max-fraction-digits="3"
      @input="refocus"
    />

I don't like spending hours on finding workarounds for the basic functionality that should have been working out of the box though.

[ReljaMihajlovic]

@input="modelValue = $event.value as number" hack works like a charm. But if you also want to have the validation (e.g. for max/min values) on input event, you could also do:

function refocus($event: InputNumberInputEvent) {
  const target = $event.originalEvent.target as HTMLElement;
  target.blur();
  target.focus();
}

<InputNumber
      v-model="modelValue"
      mode="decimal"
      show-buttons
      :min="0"
      :step="0.01"
      :max="maxStep"
      :max-fraction-digits="3"
      @input="refocus"
    />

I don't like spending hours on finding workarounds for the basic functionality that should have been working out of the box though.

@MilenaMalysh This is great, do you know if there is a way to globally attach a handleFunction to the input event of the InputNumber component, so that there is no need to add it individually to every instance where InputNumber is used?

[TheZlodziej]

You should also check whether the value is "-" before you refocus because in other case the validation will not come through and you will be unable to input negative values.

function refocus(event: InputNumberInputEvent) {
  if (event.value === '-')
    return
 

  const target = event.originalEvent.target as HTMLElement
  target.blur()
  target.focus()
}

@input="modelValue = $event.value as number" hack works like a charm. But if you also want to have the validation (e.g. for max/min values) on input event, you could also do:

function refocus($event: InputNumberInputEvent) {
  const target = $event.originalEvent.target as HTMLElement;
  target.blur();
  target.focus();
}

<InputNumber
      v-model="modelValue"
      mode="decimal"
      show-buttons
      :min="0"
      :step="0.01"
      :max="maxStep"
      :max-fraction-digits="3"
      @input="refocus"
    />

I don't like spending hours on finding workarounds for the basic functionality that should have been working out of the box though.

@MilenaMalysh This is great, do you know if there is a way to globally attach a handleFunction to the input event of the InputNumber component, so that there is no need to add it individually to every instance where InputNumber is used?

[mitow7821]

@input="modelValue = $event.value as number" hack works like a charm. But if you also want to have the validation (e.g. for max/min values) on input event, you could also do:

function refocus($event: InputNumberInputEvent) {
  const target = $event.originalEvent.target as HTMLElement;
  target.blur();
  target.focus();
}

<InputNumber
      v-model="modelValue"
      mode="decimal"
      show-buttons
      :min="0"
      :step="0.01"
      :max="maxStep"
      :max-fraction-digits="3"
      @input="refocus"
    />

I don't like spending hours on finding workarounds for the basic functionality that should have been working out of the box though.

Unfortunately that doesn't work while removing numbers using backspace on my android