Range input value not set on initial render in 15.2.0

[mikecao]

Do you want to request a feature or report a bug?

This is a bug.

What is the current behavior?

When rendering a range input element, the value of the input isn't set on the initial render. You have to call render again for the value to get picked up.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/reactjs/69z2wepo/).

I've created a demo here, https://jsfiddle.net/caozilla/qchxo3qb/4/.

The demo includes a component called Test which simply renders an range input component by passing some props. There is an update button which calls setState and should trigger the render. There are also console.log statements which show the values being used during the render.

When you run the demo you'll notice that you have to click the update button twice before the input value updates. The strange thing is that it seems to have something to do with the min and max attributes of the input. There is a commented out line where it does var max = 100 and that seems to work fine on initial render. But when it references the state value, it doesn't work.

What is the expected behavior?

The input value should be set properly on initial render.

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

This affects React 15.2.0. It works fine in 15.1.0. I've only tested on the latest Chrome.

[syranide]

It works just fine: https://jsfiddle.net/4feqLmmy/

You even log the value yourself in the console and it shows 0 0 0, then when you press the button value is updated to 50 and thus prints 50 0 100 and it updates the range correctly. I don't see anything wrong here besides your jsfiddle.

EDIT: my bad (mouse is buggy and double clicks automatically sometimes >_<), ok I see what you mean now. Yeah something's wrong here.

[syranide]

Duplicate of #7099

Basically, range input truncates the value according to min/max but React doesn't consider this and can apply the properties in the wrong order causing it to be truncated first and then the limits updated.

[syranide]

It's really kind of hacky and a bad idea in some cases, but if you put min+max as a key on the range input it will always show correctly (for now).

[mikecao]

@syranide I just saw that #7099 was fixed but the fix only applied to the step parameter. Would this fix also work for min/max values?

[syranide]

@mikecao Yeah that should work.

[troydemonbreun]

Okay, will fix this one like I fixed for #7251

[zpao]

This was fixed.