primefaces / primefaces/primereact
Input Number: Avoid Number Zero as First Character
Nobody has claimed this yet.
- Dominant language
- CSS
- Stars
- 8.3k
- Forks
- 1.2k
- PR merge metrics
- No merged PRs in 30d
Description
Describe the bug
I'm not sure whether this is the intended behavior or a bug, but I need to prevent users from inserting 0 as the first character when entering currency values. In this scenario, users should not be able to type or see 0.00 as the initial UI value.
Currently, I cannot find a way to intercept or override the component’s internal onChange behavior. It appears that the input triggers its own change handling regardless of any custom onChange logic I pass.
For example, in this StackBlitz demo: https://stackblitz.com/edit/1vp6gkfe?file=src%2FApp.jsx
the first input has no onChange handler, yet typing still updates the UI. This suggests the component always processes the input internally before (or instead of) delegating to the user-provided handler.
I also tried:
- Making the component fully controlled with
useState - Using
useRef+ manually attaching event listeners to the underlying
…but none of these approaches prevented the initial 0.00 from appearing.
Is there a recommended way to block the first character from being 0, or to fully control the formatting/validation before the UI updates?
Reproducer
https://stackblitz.com/edit/1vp6gkfe?file=src%2FApp.jsx
System Information
System:
OS: Linux 6.14 Ubuntu 24.04.3 LTS 24.04.3 LTS (Noble Numbat)
CPU: (16) x64 13th Gen Intel(R) Core(TM) i7-13620H
Memory: 46.15 GB / 62.54 GB
Container: Yes
Shell: 5.9 - /usr/bin/zsh
Binaries:
Node: 22.21.1 - /home/rrs/.nvm/versions/node/v22.21.1/bin/node
npm: 10.9.4 - /home/rrs/.nvm/versions/node/v22.21.1/bin/npm
pnpm: 10.13.1 - /home/rrs/.nvm/versions/node/v22.21.1/bin/pnpm
Browsers:
Chrome: 142.0.7444.134
Firefox: 145.0
Firefox Developer Edition: 145.0
npmPackages:
primereact: ^10.9.0 => 10.9.1
react: 19.0.0 => 19.0.0
tailwindcss: ^3 => 3.4.16
Steps to reproduce the behavior
Type 0 as the first character.
Expected behavior
If users type 0 as the first character, UI shouldn't show it. It not necessary need to be character 0, I just need a way to trigger my own onChange or onValueChanged method.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked StackBlitz reproducer and the InputNumber component's event and controlled-value behavior. Trace how a first-character 0 is formatted before the custom callback runs. Done means users can prevent the initial 0.00 from appearing or can reliably control the value before the UI updates, with the behavior covered by a regression test.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100