[Bug]: Slider conflicted validation when non-numerical is entered

[nelsonchen90]

Package

carbon-components, carbon-components-react

Browser

Firefox

Package version

10.56.0

React version

17.0.2

Description

When the props.invalid is provided to the component, it seems to be overriding the internal validation by Slider.
In Chrome, this seems to be fine, since it prevents user from entering non-numerics to the text input. However, when in Firefox, it's still allowed to enter alphabetical characters. The internal validation logic will catch this error - in the storybook, it will highlight with red border on the input box.
But when we provide external validation, it fails to validate, because props.onChange is not called when the input value is not valid (alphabetics), thus it never reaches to external validation logic. Neither user nor application have a way to capture such error.

CodeSandbox example

https://codesandbox.io/s/slider-bugs-forked-6vtp9c?file=/src/index.js:307-313

Steps to reproduce

• use Firefox, enter string "abc" into input box
• move focus away
• the input box is not highlighted with red border.

Code of Conduct

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

[tay1orjones]

Duplicate of #9225

[tay1orjones]

Duplicate of #9696

[tay1orjones]

@nelsonchen90 This is closely related to #7039 in that it's a similar issue (but with NumberInput instead of Slider) ultimately caused by a bug in Firefox.

In the case of NumberInput, onKeyUp can be provided to work around this. For Slider, there's no way to provide an onKeyUp to the input. A prop could be added to facilitate onKeyUp on the Slider's input element though. Would this work for your use case?

Otherwise my understanding is that this is blocked externally by the browser's implementation.

[nelsonchen90]

@tay1orjones thanks for the analysis.

A prop could be added to facilitate onKeyUp on the Slider's input element though

Are you proposing a new prop onKeyUp for Sliders? assuming it will be called with the current value in the input element, I think it will work for our use case.

[nelsonchen90]

@tay1orjones
by any chance this would be available to v7 of carbon component react (https://v10-react.carbondesignsystem.com/)

[fukudasjp]

@tay1orjones sorry for mentioning you again, but could this fix be back-ported to v10?