NumberInput and floating point values

[cdellacqua]

What package(s) are you using?

• [x] carbon-components
• [x] carbon-components-svelte

Detailed description

I was trying to use the NumberInput component and I found out that using the up and down buttons instead of the arrow keys on my keyboard (thus triggering the custom function that changes the value) causes the classic approximation problem of the floating point binary representation.

The native <input type="number"> isn't affected by this issue because browsers take into account the inaccuracy of the binary representation and implement ways to avoid the problem.

What browser are you working in?

• Google Chrome
• Android WebView

It should be noted that Firefox doesn't seem to be affected by this problem, at least visually

What version of the Carbon Design System are you using?

• carbon-components v10.17.0
• carbon-components-svelte v0.9.6

Steps to reproduce the issue

1. Add a NumberInput component to a page
2. Set the step property to 0.01
3. Press the increment button a few times

CodeSandbox: https://codesandbox.io/s/flamboyant-hellman-2cdnf

Additional information

A possible solution to fix the problem could be to temporary treat the operands as integers, as presented in the following code, in the function that updates the value of the input when the arrow buttons are clicked:

const stepDecimalPlaces = step % 1 === 0 ? 0 : step.toString().split('.')[1].length;
const nextValue = stepDecimalPlaces === 0
    ? value + step * direction // integer values are not affected
    : Math.round(value * Math.pow(10, stepDecimalPlaces) + step * Math.pow(10, stepDecimalPlaces) * direction) / Math.pow(10, stepDecimalPlaces);

[NoelJacob]

Guys it's about 1 1/2 years and what are you waiting for? Just sane simple enough to copy paste.

[tay1orjones]

what are you waiting for?

@NoelJacob There's additional complexity around this issue, it wasn't linked here but should've been. There's been a lot of related discussion in https://github.com/carbon-design-system/carbon/issues/8690, https://github.com/carbon-design-system/carbon/issues/8689, https://github.com/carbon-design-system/carbon/issues/6930. I think the closest we've gotten to addressing this was in https://github.com/carbon-design-system/carbon/pull/7215

Beyond that, it bears repeating that our team is finite and unable to take on every request we get. As such, sometimes things don’t get the attention they might deserve or have measurable progress despite being great ideas.

Opening a pull request proposing this idea through code is a great way to breathe life into this and begin to gather feedback from the team.

[metonym]

I want to highlight the work of @jqlio18, who added support for floating point step values to carbon-components-svelte. The approach is to use the native stepUp and stepDown methods on the input element.