NumberInput with precision has pattern that excludes negative values
See original GitHub issue🐛 Bug report
The NumberInput pattern
created when using precision
rejects negative values.
💥 Steps to reproduce
- Create a number input
<NumberInput
min={-12}
max={12}
precision={1}
>
<NumberInputField />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>
- Enter a value such as
-1.2
. Note: This issue doesn’t seem to occur for values like-10
- where precision is not needed.
🧐 Expected behavior
The value should be accepted by the pattern.
🧭 Possible Solution
Change the pattern from [0-9]*(.[0-9]+)?
to -?[0-9]*(.[0-9]+)?
when the min
property is less than zero.
🌍 System information
Software | Version(s) |
---|---|
Chakra UI | “@chakra-ui/react”: “^1.0.3” |
Browser | Any (Firefox / Chrome tested) |
Operating System | N/A |
📝 Additional information
Number field is highlighted red even though the input is valid
Issue Analytics
- State:
- Created 3 years ago
- Comments:7 (1 by maintainers)
Top Results From Across the Web
html - Is there any way to prevent input type="number" getting ...
It was only preventing negative numbers from being entered from up/down arrows, whereas user can type negative number from keyboard. Solution is to...
Read more >InputNumber - PrimeFaces Showcase
InputNumber formats input fields with numeric Strings. It supports currency symbols, minimum and maximum value, negative numbers, and a lot of round methods....
Read more >String formulas - Workato Docs
Input - An input datapill. It can be a string, number, date, or datetime datatype. ... This formula check is the string contains...
Read more >Solved: Excluding negative values from a calculated column
Solved: Hi all, I'm using two columns to determine the mean time to resolve. However, some of the 'resolved' fields are blank resulting...
Read more >XPath and XQuery Functions and Operators 3.1 - W3C
This document was published by the W3C XML Query Working Group and ... if the input number is positive, and the negative sub-picture...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
If anyone else runs into this, here is a workaround
@segunadebayo This is not fixed in
1.7.2
then type in -123.45 in the input and try to submit via a form (i.e. with formik)
on submit, you receive an built in browser validation error “Please match the requested format” because the
<input />
it generates comes with apattern="[0-9]*(.[0-9]+)?"