InputNumber: Inconsistent behavior when using min and max props

[elvis1994]

Describe the bug

When using the InputNumber component with both min and max props set, it becomes difficult to input certain valid values due to aggressive auto-correction. This affects user experience and makes it unintuitive to edit the field.

Render the component with a default, min and max values as reported in the stackblitz link example.

Reproducer

https://stackblitz.com/edit/vitejs-vite-c14kqmbg?file=src%2FApp.tsx

System Information

PrimeReact version
10.9.6

React version
18.2

Language
ES6

Build / Runtime
Vite

Browser(s)
No response

Steps to reproduce the behavior

Attempt to type 0.5:

1. Type 0 → the field auto-corrects to 0.2.
2. Try to remove the 2 using the backspace key → the field reverts or resists change.

Expected behavior

The component should allow the user to enter any number that respects the defined constraints, without interfering with the input process before the number is complete. In this specific scenario the users should be able to freely input 0.5 without the component prematurely setting the value to the minimum 0.2.

Backspacing or editing the value manually should be possible without the field auto-correcting in a way that blocks input.

[tnowad]

I think this might not be a bug. The unexpected behavior likely comes from your onChange event. When you type 0, it fires an update to onChange, which sets the value to 0. Then, when the value is set to 0, That change then triggers a props update that sets the value to 0.2.

The onValueChange event only fires when the input is unfocused or Enter is pressed.
My solution:

import { useState } from 'react';

import 'primereact/resources/themes/lara-light-indigo/theme.css'; //theme
import 'primeicons/primeicons.css'; //icons
import 'primeflex/primeflex.css'; // flex
import './App.css';

import {
  InputNumber,
  type InputNumberChangeEvent,
  type InputNumberValueChangeEvent,
} from 'primereact/inputnumber';

function App() {
  const [value, setValue] = useState(0.4);
  const min = 0.2;
  const max = 2.4;
  return (
    <main>
      <InputNumber
        value={value}
        // remove this
        // onChange={(e: InputNumberChangeEvent) => setValue(e.value || 0)}
        onValueChange={(e: InputNumberValueChangeEvent) =>
          setValue(e.value || 0)
        }
        showButtons
        min={min}
        max={max}
      />
    </main>
  );
}

export default App;

[melloware]

Thanks @tnowad !