Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

KeyFilter: Incorrect handling of dash and dot in numeric inputs #7557

Closed
navedqb opened this issue Jan 3, 2025 · 2 comments · Fixed by #7559
Closed

KeyFilter: Incorrect handling of dash and dot in numeric inputs #7557

navedqb opened this issue Jan 3, 2025 · 2 comments · Fixed by #7559
Assignees
Labels
Component: Documentation Issue or pull request is related to Documentation
Milestone

Comments

@navedqb
Copy link
Contributor

navedqb commented Jan 3, 2025

Describe the bug

https://primereact.org/keyfilter/#presets

In "Integer" and "Number" input fields where multiple dashes (-) or dots (.) can be entered

Reproducer

https://primereact.org/keyfilter/#presets

System Information

"primereact": "^10.9.1"
"react": "^18.3.1"

Steps to reproduce the behavior

No response

Expected behavior

No response

@navedqb navedqb added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Jan 3, 2025
@melloware
Copy link
Member

melloware commented Jan 3, 2025

@navedqb this is intentional. KeyFilter by default just filters SINGLE keystrokes to prevent input but not validating something is a valid number. All of the PrimeTek libraries operate this way.

Look at the Whole Word example: https://primereact.org/keyfilter/#regexword

If you want to use int and only allow the negative at the start of the word try

<InputText id="numkeys"  keyfilter={/^[-]?(\d+)?$/} validateOnly onInput={validateInput} />

That will allow only 1 minus sign and it must be the first character only.

I am sure you can ChatGPT to find a good numeric one also that only allows one "decimal".

But the component is working as designed.

@melloware melloware added Resolution: By Design The behavior in the issue is by design and the component exhibits the expected behavior and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Jan 3, 2025
@melloware
Copy link
Member

Here is a working StackBlitz: https://stackblitz.com/edit/dqc2ayrj?file=src%2FApp.tsx

melloware added a commit to melloware/primereact that referenced this issue Jan 3, 2025
@melloware melloware added Component: Documentation Issue or pull request is related to Documentation and removed Resolution: By Design The behavior in the issue is by design and the component exhibits the expected behavior labels Jan 3, 2025
@melloware melloware added this to the 10.9.2 milestone Jan 3, 2025
@melloware melloware self-assigned this Jan 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: Documentation Issue or pull request is related to Documentation
Projects
None yet
2 participants