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

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

[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/)