primefaces / primefaces/primereact

Input Number: Avoid Number Zero as First Character

Open
#8,394 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Status: Needs Triage
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.