NumberInput arrow buttons with decimal step value do not function correctly

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you’re having.

Trying to use NumberInput to set a value that can be fractional, eg. 0.5. Want to use a step value of 0.1 and noticing that the up/down arrows from the React component behave incorrectly and will sometimes be off by some small number, see attached screenshot or codesandbox.

Appears to be a floating point number issue with the react component’s up/down buttons because using the arrow keys in the NumberInput component, or the vanilla html number <input> does not cause this issue.

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?

arrow step buttons updated to handle decimal numbers

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

10.9.3

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

Streams on CPD, end of February

Steps to reproduce the issue

1. use something <NumberInput step={0.1}>

Please create a reduced test case in CodeSandbox

https://codesandbox.io/s/jolly-mahavira-n4u4w

Additional information

[piers-walter-ibm]

I also encountered this issue, and implemented a workaround: here.

Could something like this be added as a prop to NumberInput perhaps

fixFloating={true}

I realise you may not want to interfere with the way javascript handles numbers and leave it as an exercise to the programmer, depending on their use case

[tay1orjones]

Will monitor how common the use case is

We’ve had this reported in our addons repo https://github.com/carbon-design-system/carbon-addons-iot-react/issues/1693