Text Field with type: "number" treated as Empty when Incrementing/Decrementing
See original GitHub issueDescription: When using a Text Field with the type
property set to “number”, the form will treat the field as if it’s empty when entering a number by incrementing or decrementing. The form still recognizes manually entered numbers or numbers entered as an initialValue.
{
component: "text-field",
id: "number",
isRequired: true,
label: "Number Test",
name: "number",
step: 100,
type: "number"
}
Manually entered number:
Incremented number:
Schema: https://stackblitz.com/edit/number-test?file=index.js
Issue Analytics
- State:
- Created 2 years ago
- Comments:7 (7 by maintainers)
Top Results From Across the Web
Remove increment and decrement icon from input field
One solution is to simply use a text type. This won't change much if you are using validation, ...
Read more ><input type="number"> - HTML: HyperText Markup Language
A number input is considered valid when empty and when a single number is entered, but is otherwise invalid. If the required attribute...
Read more >Why the number input is the worst input - Stack Overflow Blog
The pro-number input crowd has legitimate concerns, primarily around accessibility. A number input has native increment/decrement buttons.
Read more >input[type=number] not announcing value changes ... - GitHub
When hitting SHIFT + UP ARROW, the value of the incremented field increases, but there is no announcement of the number which is...
Read more >Why the GOV.UK Design System team changed the input type ...
Using <input type="number"> for collecting numbers that are not incrementable can cause problems with browsers validating them in that way. For ...
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 FreeTop 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
Top GitHub Comments
@rvsia According to carbon docs, value is not present in e.target.value, it is in
e.imaginaryTarget.value
, check https://react.carbondesignsystem.com/?path=/docs/components-numberinput--default.Example: https://codesandbox.io/s/misty-sea-yygnm?file=/src/index.js:463-486
@DavidResende0
This is an issue on Carbon side. Check it here: https://codesandbox.io/s/awesome-rhodes-4b161
When you click on any of the arrow button,
onChange
event is called with emptytarget.value
.There have already been multiple issues opened: https://github.com/carbon-design-system/carbon/issues?q=is%3Aissue+is%3Aopen+numberInput
So, I am closing this for now. Please, feel free to reopen, if you think we can do something with it here in DDF repo.