Page MenuHomePhabricator

Decimal step on NumberInputWidget results in cumulative binary rounding error
Open, LowPublic

Description

Steps to reproduce:

  1. Go to https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop, scroll down to "NumberInputWidget (0–1, step by .1, page by .25)"
  2. Enter "1".
  3. Press the down arrow key 10 times.

Expected: You end with 0.
Actual (Firefox): You reach 0.0000000000000001
Actual (Vivaldi): Rounding errors show up even before you should reach 0.

pasted_file (70×663 px, 6 KB)

Event Timeline

Esanders raised the priority of this task from to Needs Triage.
Esanders updated the task description. (Show Details)
Esanders added a project: OOUI.
Esanders added subscribers: Aklapper, Esanders.
Jdforrester-WMF set Security to None.

We should remove the decimal example from the demo, and document that step should be an integer to avoid floating point errors.

If someone comes up with a real-world need for decimal increments they should probably just extend the class and use a mapping function to generate non-integer steps (e.g. f(x) -> x/10) ) - if it's useful we can upstream it.

Short of pulling in a decimal type library we're not going to be able to mimic non-integer steps in JS and that seems overkill for a rarely used feature.

...or you could call stepUp()/stepDown() to exploit the native browser functionality, but support is sketchy? https://developer.mozilla.org/en/docs/Web/API/HTMLInputElement

...or you could call stepUp()/stepDown() to exploit the native browser functionality, but support is sketchy? https://developer.mozilla.org/en/docs/Web/API/HTMLInputElement

I think it covers all our JS supported browsers these days: https://caniuse.com/mdn-api_htmlinputelement_stepup