NumberInput component step prop did not support "any"

What package(s) are you using?

7.12.0 But issue exist on latest version too.

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you’re having.

The type of prop ‘step’ should be string and pattern prop should be exposed. 1.HTML5 shows validation message if user put any value into number input which is not a multiple of step For ex: If step=10 and value=10 and user enters 15 or 15.30 then on form submit it would shows validation message as ‘Please enter a valid value. The two nearest valid values are 10 and 20’ 2.So in this case if user do not want to show any validation message then we have pass step=‘any’. But in carbon step prop is of number type. So the type should be updated to string so that user could pass ‘any’ if does not want any client validation. Currently pattern prop is hard coded and it could be exposed as a properties where user can set his own pattern. As we have scenario where user can set decimal values like this step=“any” pattern=“^\d*(.\d{0,2})?$”

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? Step should accept “any” and “pattern” should be exposed as a prop. So that user can enter decimal value as per required format without any HTML5 violation.

What browser are you working in? Issue occurs on all browsers.

What version of the Carbon Design System are you using?

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

Steps to reproduce the issue

1. Enter a decimal value in numberinput and hover mouse over it browser will show invalid error.
2. Enter a non decimal number which should not be a multiple of step value, and hover mouse over it browser will show invalid error.

Please create a reduced test case in CodeSandbox

• Style and vanilla JS: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/components/examples/codesandbox
• React: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox

Additional information

• Screenshots or code

• Notes

[davidicus]

@tw15egan I have submitted a PR to add this functionality.

[tw15egan]

Most likely an oversight on our part and assuming the step would always be a number. If passing in any allows a user to bypass HTML5 form validation, then it makes sense to change the PropType to accommodate that 👍

Ref https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#step