question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Text Field with type: "number" treated as Empty when Incrementing/Decrementing

See original GitHub issue

Description: 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:closed
  • Created 2 years ago
  • Comments:7 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
kavyanekkalapucommented, Apr 19, 2021

@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

1reaction
rvsiacommented, Apr 19, 2021

@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 empty target.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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found