[Bug]: NumberInput allows entering non-numeric alphabet character letters in Firefox and Safari

[nmgokhale]

Package

@carbon/react

Browser

Firefox

Package version

v1.77.0

React version

v18.3.1

Description

I can enter alphanumeric characters (A-Z, a-z) in numberfield control in Firefox and Safari browser.

Reproduction/example

https://stackblitz.com/edit/github-oidqwfys?file=src%2FApp.jsx

Steps to reproduce

Suggested Severity

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

Application/PAL

No response

Code of Conduct

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

[tay1orjones]

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

This is why onKeyUp was added, so you can work around this and identify the individual keystrokes and implement your own additional validation.

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

[tay1orjones]

⚠️ Don't close this issue ⚠️

This is commonly reported about once a year. Leaving this issue open should increase the chances of someone finding this and not opening another duplicate. I'll link the past ones for context.

Duplicate of #5658
Duplicate of #7039
Duplicate of #10279
Duplicate of #13624
Duplicate of #17019

Essentially the same issue exists for Slider too, #9696, #11177.

[tay1orjones]

This issue should be completely avoidable now by using type="text" with a proper pattern, #19471