React: For Controlled Input, step does not work as expected unless initialized with null or "".

Created on 6 Mar 2018 · 6Comments · Source: facebook/react

BUG

What is the current behavior?
For input type="number", step does not work as expected if there is an initial value set. Step only seems to get honored if the initial value is "" or null.

Example:
https://codepen.io/anon/pen/MQMBmX

The example uses a controlled input binding value and step. Step is 1/10th of the value. If you edit the value in the textbox to 50000 and increment using the stepper, it will increment to 50100 (i.e. by the initial value and not by the current step).

Edit the code so initial value is "" or null. Edit textbox to 50000 and step up - value goes to 55000 as expected.

What is the expected behavior?
It should be possible to render a number input that honors step without having to initialize the input component value to null or "" first.

It seems when there is an initial value provided, it will write a value attribute into the DOM (e.g. value="100"). When initial value is "" or null then just the value attribute is written to DOM with no assignment. e.g. (value).

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

16.3.0-alpha.1 (ported to this version to confirm if still an issue)
0.14.7 (originally found in this version)

Seems to affect Chrome only (confirmed windows and mac, versions 59 and 64). Bug does not appear in Safari (on a mac at least).

DOM Bug

Source

andyboyne

Most helpful comment

Yes. Actually I wonder if we should get a timeline together on this.

nhunzaker on 28 Mar 2018

👍3

All 6 comments

I'm seeing a very particular behavior with this fiddle in both Chrome 64 on Windows 10 and Firefox 52 on Debian. If I type 50000 into the input and then immediately click on the up arrow, I get 50100. If I type 50000 into the input, click elsewhere in the document, and then click on the up arrow, I get 55000.

nmain on 6 Mar 2018

You don't need to change the value, click the up arrow multiple times and it starts to change to numbers that don't make sense.

jmz7v on 12 Mar 2018

Thanks for the report @andyboyne. The problem stems from the fact that we don't update the value attribute on number inputs until the field is blurred. We do this to avoid a bunch of unwanted behavior related to browser validation. cc @nhunzaker.

This should be resolved once we finally stop syncing the value attribute for controlled inputs https://github.com/facebook/react/issues/11896.

aweary on 28 Mar 2018

Yes. Actually I wonder if we should get a timeline together on this.

nhunzaker on 28 Mar 2018

👍3

As aweary mentionned it is a synching issue, the field is sync when the field is blurred.
So I added some console.log and I figured out that e.target.value and e.target.getAttribute("value") are not sync while the field is not blurred.
So a workaround is to add e.target.setAttribute("value",e.target.value); to force to update this value and then it works as expected.

       onChange={e => {
        console.log("target" , e.target.value);
        console.log("getAttribute value",  e.target.getAttribute("value"));
        e.target.setAttribute("value",e.target.value); 
        this.setState({value: e.target.value, step: e.target.value / 10});
      }}