Why does my HTML number input get stuck with step 0.010000000000000009?

When I create an HTML <input type="number"/> with step="0.010000000000000009". I can only click the button to increase the value once to fill in the min value and then only once for the first increase by the step value, then it gets stuck at this value and further clicks have no effect. I can only reproduce this with min="1.2" max="1.3".

All other combinations of min, max and step I tried allow to click the button multiple times until it reaches max in the defined steps.

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><title>input with decimal step</title></head><body><input type="number" min="1.2" max="1.3" step="0.010000000000000009"/></body></html>

1

Best Answer

I believe that, according to the HTML5 Living Specification, your <input /> element "suffers from step-mismatch":

  • https://html.spec.whatwg.org/multipage/input.html#the-step-attribute
  • https://html.spec.whatwg.org/multipage/input.html#concept-input-min-zero

Following the spec w.r.t. your case...

  • The step value is 0.010000000000000009 (from parseFloat).

  • The step-scale-factor value is always 1 for <input type="number" />

  • The step-base is the min attribute, which is 1.2.

  • The allowed-value-step is step * step-scale-factor which is 1 * 0.010000000000000009 === 0.010000000000000009.

  • Re: "Constraint validation", the spec says this:

    Constraint validation: When the element has an allowed-value-step, and the result of applying the-algorithm-to-convert-a-string-to-a-number to the string given by the element's value="" is a number, and that number subtracted from the step-base is not an integral multiple of the allowed-value-step, the element is suffering from a step mismatch.

    I'll rephrase that to this...:

    • If element has allowed-value-step and numeric value="" attribute.
      • (So this is only after the <input/> is non-empty, such as clicking the up/down buttons once to give it a value of 1.2)
      • ...then subtract 1.2 (the step-base) from 1.2 (the value="") to give 0.
      • And 0 is not an integral multiple of 0.010000000000000009.
      • Therefore the element is suffering from a step mismatch.

Now, w.r.t. your findings:

I can only click the button to increase the value once to fill in the min value

Yes, that follows the HTML5 spec: the initial value="" is empty, so browsers will choose the next valid highest value which is the min="1.2" value.

and then only once for the first increase by the step value

Yes, that's because the next step is 1.2 + 0.010000000000000009 which is 1.210000000000000009 - which both browsers truncate the display to 1.21, however as soon as this happens we see a difference in browser behaviour:

  • Firefox seems to correctly comply with the spec and it sets HTMLInputElement.validity.stepMismatch to true and disables the up/down buttons due to the step-mismatch condition.
  • Chrome 92 does not and using the up/down buttons to set other values still results in HTMLInputElement.validity.stepMismatch === false.

Here's a snippet that shows validity information:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><title>input with decimal step</title></head><body><input id="inp" type="number" min="1.2" max="1.3" step="0.010000000000000009" /><ul id="eventsList"></ul><script>const inp = document.getElementById('inp');const ul = document.getElementById('eventsList');inp.addEventListener( 'input', logInfo );inp.addEventListener( 'change', logInfo );inp.addEventListener( 'click', logInfo );function logInfo( e ) {const li = document.createElement('li');li.textContent = e.type + ". Value: " + inp.value + ", valid: " + inp.validity.valid + ", stepMismatch: " + inp.validity.stepMismatch;ul.appendChild( li );}</script></body></html>

  • In Chrome, it lets me click the up button 10 times (1.2, 1.21, 1.22, 1.23, ..., 1.28, to 1.29) before it stops, though it never reports stepIsmatch: true.
  • In Firefox, it lets me click the up button 1 times (1.2 and 1.21) before it sets stepMismatch: true.

My money's on Chrome doing their own thing given their interpretation (or at least, their implementation) of the spec is more forgiving and is less likely to result in end-user-frustration when step is set to a strange value.

What's interesting is that the Number type in browsers seems able to accurately represent 0.010000000000000009 without any tell-tale IEEE 754 rounding (ditto Python), whereas C#/.NET's Single (32-bit) and Double (64-bit) floating-point types both choke and give me rather bad approximations.

Random Posts

How can I set the default playback speed in mpv?Entity framework vs NHibernate - PerformanceWhat is the difference between one way and two way SSL in client sideKeep only date part when using pandas.to_datetimeHow do I resolve "No module named 'frontend'" error message?Array push and referencesHow to convert a double to an int in Dart?How to type Redux actions and Redux reducers in TypeScript?How do I remove a submodule?OpenCV solvePnPRansacadd title using grid.arrange for multiple plots made with gridExtra::grid.arrangePrint number as reduced fraction in Rwarning: Public keyring not found; have you run 'pacman-key --init'?Is n or nlog(n) better than constant or logarithmic time?"sed" command in bashWhat is difference between monolithic and micro kernel?AADSTS75011 Authentication method by which the user authenticated with the service doesn't match requested authentication method AuthnContextClassRefHow can I force the 'this' keyword on local fields and methods with the Spotless Java code formatter?ggplot2 multiple sub groups of a bar chartformat number in C# [duplicate]