[Bug]: allowEmpty behaviour in NumberInput is not able to distinguish empty string with characters other than numbers

[nikhil-isaac]

Package

carbon-components-react

Browser

Chrome, Safari, Firefox

Package version

v7.59.6

React version

v17.0.2

Description

When I set allowEmpty to true for NumberInput, then whenever I type any characters other than numbers(like a, b, c, etc), I get only empty string("") in onChange prop. I would like to distinguish between typing an actual empty string(valid value for our usecase) and typing any characters other than numbers(invalid value for our usecase).

Reproduction/example

https://codesandbox.io/s/carbon-number-input-allow-empty-invalid-issue-97mho?file=/src/index.js

Steps to reproduce

1. Type empty string, the component allows.
2. Type any characters other than numbers(like a, b, c, etc) the component allows them too.
3. Expectation: To allow empty string(""), but not allow characters other than numbers and empty string(like a, b, c, etc).

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Application/PAL

Cloud & Cognitive Software

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[francinelucca]

@nikhil-issac would you be able to insert a screen recording reproducing the issue? I can't seem to do it from the reproduction steps.
TIA!

[nikhil-isaac]

@francinelucca Sorry for the late response!!!

The empty string is being generated even when we type non-integer characters like 'a' or 'aa' or '$', which makes it impossible to do number validation when we set allowEmpty to true..

[francinelucca]

thanks! @nikhil-isaac, I see the issue now. Could you drop that code you're using in the screenrecord into a sandbox? 🙏🏻, looks different than the one in the reproduction steps

[nikhil-isaac]

Sure @francinelucca I updated the same sandbox https://codesandbox.io/s/carbon-number-input-allow-empty-invalid-issue-97mho?file=/src/index.js.

[francinelucca]

Was able to reproduce in firefox, reopening

[shankar343]

Hi Team, any solutions we got for this issue?

[tay1orjones]

@shankar343 @nikhil-isaac

The empty string is being generated even when we type non-integer characters like 'a' or 'aa' or '$', which makes it impossible to do number validation when we set allowEmpty to true..

Browsers disagree on how to handle non-numeric input, see this bugzilla thread for more info.

Additionally, NumberInput does not modify the event passed when onChange is called. It's coming straight from the browser.

carbon/packages/react/src/components/NumberInput/NumberInput.tsx

Lines 300 to 302 in c678397

	if (onChange) {
	onChange(event, state);
	}

This is why onKeyUp was added, so you can work around this and identify the individual keystrokes and implement your own additional validation. There should be nothing preventing this working with allowEmpty.

• feat(slider, numberinput): add onKeyUp callback prop for input #11230

I hope this helps, and sorry for the lack of information earlier. I'm going to close this as a duplicate but happy to continue the conversation or pursue other options if you have ideas for a different fix or solution to the problem.

[tay1orjones]

Duplicate of #7039