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.

[NumberInput] no way to get value from NumberInput if not numeric

See original GitHub issue

What package(s) are you using?

  • carbon-components
  • carbon-components-react

Detailed description

Describe in detail the issue you’re having.

While chrome prevents NumberInput from receiving a text values, both Firefox and Safari will allow text to be written to input. Without the feature flag flipped there is no way to receive an onChange event or handle this with an error message. This component should log all changes in the onChange handler.

Is this issue related to a specific component?

NumberInput

What did you expect to happen? What happened instead? What would you like to see changed?

I expect onChange handler to be called anytime the value changes on the NumberInput. Currently onChange is not called when entering in text and if you add a ref the value that is sent back is empty.

What browser are you working in?

Chrome, firefox, and safari

What version of the Carbon Design System are you using?

latest

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

AI PAL

Steps to reproduce the issue

  1. Open up storybook in Firefox
  2. Add text to input field.
  3. There is no error message and no onChange is fired

Please create a reduced test case in CodeSandbox

https://codesandbox.io/s/elegant-lewin-hxhjc?file=/src/index.js

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:2
  • Comments:6 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
tw15egancommented, Jan 19, 2021

@joshblack any problems with adding this in? Seems like it would solve an issue for @davidicus and he’s willing to contribute a fix 😃

1reaction
davidicuscommented, Dec 18, 2020

Is this something that Carbon wants to handle for their consumers? If so I would be happy to contribute a fix.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Prevent typing non-numeric in input type number
Is there any way to get the value that is actually displayed, including the invalid characters, from within an event listener? My ultimate...
Read more >
Why the number input is the worst input - Stack Overflow Blog
When the number input contains an invalid value and you retrieve the value, ... Back-end data validation is not just enough any more....
Read more >
<input type="number"> - HTML: HyperText Markup Language
When you create a number input with the proper type value, number , you get automatic validation that the entered text is a...
Read more >
How to Allow Only Positive Numbers in the Input Number Type
In this snippet, we'll demonstrate how to allow only positive numbers in the input number type. You can use the “min” attribute to...
Read more >
Number Input - Chakra UI
The NumberInput will be set isInvalid to true internally when the value is out of range. Out of range means that the value...
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