InputNumber: Storing the number internally as a number loses precision

[matthew-dean]

Describe the bug

It may not be immediately obvious, but storing theInputNumber value as a number and emitting it as such is a bad idea. Similarly, requiring the min, max, and step values to be numbers is also a bad idea, just because of how JavaScript works, and this causes loss of precision and unpredictable functionality.

What the component appears to be doing, for example, when using step value of 0.1, is adding the number 0.1 to the current number value. In JavaScript, because floats have imprecise precision, this will add something close to 0.1 but not exactly 0.1.

Compare this to the html <input>. It will always step consistently, whereas PrimeVue's <InputNumber> will not.

Reproducer

https://stackblitz.com/edit/primevue-create-vue-typescript-issue-template-obdp4u?file=src%2FApp.vue

PrimeVue version

3.47.2

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

Chrome 124

Steps to reproduce the behavior

1. Go to the Stackblitz
2. Use the incrementing arrows on the <InputNumber> component to increment up and down by 0.1
3. Use the incrementing arrows on the <input> component to increment up and down by 0.1
4. Observe that <InputNumber> does not correctly step float values.

Expected behavior

InputNumber should do the following:

1. Allow numeric strings to be assigned to modelValue, max, min, and step.
2. Increment numbers when stepping using a decimal precision library. Consider: https://www.npmjs.com/package/big.js