[whatwg] Make stepUp() and stepDown() more developer-friendly

Hi,

Currently stepUp(n) and stepDown(n) are very basic methods. They more or
less do value += n * allowedValueStep; with n = -n; if stepDown() was
called. In addition of being pretty dumb, there are a lot of reasons why
they can throw.

At Mozilla, we think that the main use case for stepUp() and stepDown()
is to create a UI with spin buttons: clicking on the up arrow would call
stepUp() and clicking on the down arrow would call stepDown(). Such a
use case needs methods that do better than just adding n * allowedValueStep.
In addition, we think that throwing is very often a bad idea and that
should happen when the developer clearly did something wrong.

So, we would like to change the stepUp()/stepDown() algorithm to match
the following behaviour:
- we only throw if the input type doesn't allow those methods or if
there is no allowed value step;
- if the value isn't a number (aka empty string), we should just exit
the steps;
- if the value is below the minimal allowed value and n is negative, we
should exit the steps;
- if the value is above the maximal allowed value and n is positive, we
should exit the steps;
- if the element is suffering from a step mismatch, and n is negative,
the value should be changed to the next valid value. Otherwise, it
should be changed to the previous allowed value;
- newValue = value + n * allodValueStep;
- if the newValue is below the minimal allowed value, the newValue
should be equal the minimal allowed value;
- if the newValue is higher than the minimal allowed value, the newValue
should be equal the minimal allowed value.

Such a behaviour creates a real added value in stepUp() and stepDown()
that make those methods useful compared to simply do value += n *
allowedValueStep; and prevent throwing when there is no need to.

It is interesting to see that <input type=number> spin buttons in Chrome
have that behaviour [1] but stepUp() and stepDown() do not.

Opera has the same kind of UI behaviour than Chrome and
stepUp()/stepDown() tries to be more clever than what the specifications
say (it is clamping to the nearest allowed value). However, it is still
throwing too much.

You can try the implementation of stepUp() and stepDown() in Firefox
desktop by enablinig the pref "dom.experimental_forms" or by using
Firefox Android (no need to toggle any pref).

You can use this page to test:
http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=1918

[1] The only difference between Chrome's spin buttons behaviour and our
proposal is that when value is the empty string, it is setting value to
0 and continue to the next steps (unless the 0 is below the minimal
allowed value and n < 0, in that case value=min). It might be
interesting to specify something better than "do nothing" if value="".

Cheers,
--
Mounir

Received on Tuesday, 20 November 2012 15:13:50 UTC