A brief post explaining why you might not want the "freebies" a browser gives you when a form component has an input type of number.

Let’s get to the point. By default number type inputs on a form will change with the scroll wheel. I’m not sure that’s ever a desirable feature on a desktop device if accuracy matters?

Exhibit A: Meter Reading

Here’s a particularly annoying example: Octopus Energy’s meter reading submission form. If you happen to start scrolling whilst on the meter reading input then the number is going to change! For a page which has the sole purpose of capturing that number this is not ideal.

The conditions for this error are particularly likely on this form. It only has two inputs, the meter reading value and the date. The date defaults to today (I expect that’s the most common value). That means for the typical use case the number input is the only form element that will have focus. The page also has a nice big design and font, so you’re likely to be scrolling down to get to the Submit button.

I would hazard a guess there is a non-trivial increase in accuracy to be had by disabling scroll from changing the value when browsing on desktop devices for this page. The UI on the Octopus Energy website does prompt you before submission (which is how I realised the numbers changed and started writing this post), but still, for a form that is likely used millions of times a month it really feels worth optimising further!

Fixing

Is the fix difficult? I don’t think so. I am not on the Octopus Energy UI team but I think it is as simple as grabbing the onWheel event for the input and blurring the element, i.e. without focus the numbers aren’t going to move.

If you are after even more thoughts on number inputs being difficult check out Stack Overflow’s rant post about the number input challenges.