HTMLProgressElement value attribute doesn't removed after being fed with false, null or undefined

[zendive]

Version

2.4.4, 2.5.13

Reproduction link

https://jsfiddle.net/xt3uf0g5/1/

Steps to reproduce

As per documentation: https://vuejs.org/v2/guide/syntax.html#Attributes
null, undefined, false should remove attribute

What is expected?

Value attribute removed

What is actually happening?

Specific to HTMLProgressElement - the attribute is not removed.

By giving false - exception (Failed to set the 'value' property on 'HTMLProgressElement': The provided double value is non-finite.)

By giving null, undefined - value="0"

---

HTMLProgressElement without value attribute changes visual to represent "indeterminate" state (link: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress)

[posva]

The documentation you're referring to is for boolean attributes only.
I'm not sure if we want to add some magic for some specific attributes to be removed when the value is false, null, undefined or ''

For the moment you can use this workaround:

Vue.component('my-progress', {
  functional: true,

  render: (h, {
    data
  }) => {
    if (!Number.isFinite(data.attrs.value)) {
      delete data.attrs
    }
    return h('progress', data)
  }
})

[yyx990803]

You can workaround this with v-if:

<progress v-if="value" :value="value"></progress>
<progress v-else></progress>

Implicitly removing on falsy values would be a breaking change so it's a no-go, at the same time, adding a modifier for this seems like an overkill since this is such a niche use case. Also, with v-if you have more explicit control over under what condition the attribute should be removed.

[diegoflorez]

You can workaround this with v-if:

<progress v-if="value" :value="value"></progress>
<progress v-else></progress>

Implicitly removing on falsy values would be a breaking change so it's a no-go, at the same time, adding a modifier for this seems like an overkill since this is such a niche use case. Also, with v-if you have more explicit control over under what condition the attribute should be removed.

This workaround is not working with versions greater than 2.4.2 as shown in the next examples
Version: 2.4.2 [Works] https://codepen.io/anon/pen/dBYrer
Version: >=2.4.3 [Fails] https://codepen.io/anon/pen/zVvbWj
It keeps adding value attribute and setting it to 0 Unexpected behaviour for v-if v-else