Setting progress element value to 0 is removed from the markup

[ScottDowne]

Seems like <progress max="5" value="0"/> isn't working as expected.

Here it is in regular HTML: https://jsfiddle.net/a4zx1oq2/

Expected: rendered an empty progress bar.

In react however, it's rendered as https://jsfiddle.net/6xsnLaey/1/

I noticed however, setting the value to 0 in componenetDidMount seems to get around this bug, same with using -0

Here it is in react: https://jsfiddle.net/69z2wepo/40939/

[syranide]

#6119 and the new DOM renderer is the root cause for this (and HTML being quirky as always). It's caused by progress.value reporting 0 even when the attribute isn't there, which is different from actually being 0 (sigh), the new DOM renderer sees 0 and doesn't update the value. This shouldn't normally happen but value is special-cased (because of inputs) right now which causes the above behavior to happen.

PS. You can also set it to just an empty string as a work-around.

[ScottDowne]

Now that you mention input, it's doing some weird things with value="0" too, but seems to still function fine.

If I set value="0" in plain html, and inspect it, it's still there. If I do it in react, the input has the 0 in the input, but inspecting it doesn't show the attribute in the markup. https://jsfiddle.net/5154tdL9/1/

input quirk above is probably not a concern, but it might give us room to wiggle on changing things for progress without breaking regular input? I understand the desire to not make a special case for progress.

[syranide]

@ScottDowne That's "intended" and a behavior exhibited by HTML (try typing in a regular input and inspect). Anyway, this is known issue and it's being indirectly fixed AFAIK, the end result being that value should not be special-cased at all but rather handled differently by ReactDOMInput itself and thus this problem goes away.

[Pomax]

Ran into this as well, hopefully #5680 can be rebased and resolved soon (it looks like it's been gathering a bit of dust?)

[jimfb]

This will be fixed by #6406, which has also been gathering a bit of dust. #6406 was intended to supersede #5680.

[Pomax]

ah, nice!

[jimfb]

Fixed in #6406

[luiscrjunior]

One possible workaround (for the ones that are still using the unfixed version) is passing a two decimal float number. So, value={parseFloat(original_value).toFixed(2)} will transform 0 into 0.00 and it does the trick.