Required inputs in child components are highlighted as invalid on render in Firefox.

[bryonf]

Version

2.5.13

Reproduction link

https://jsfiddle.net/50wL7mdz/85928/

Steps to reproduce

No additional steps required. Opening the JSFiddle in Firefox should automatically cause the issue to display.

What is expected?

Required inputs that are rendered in a child component without a valid default value should display normally.

What is actually happening?

Unselected required inputs are being highlighted as though a submit attempt was made despite no user action being taken.

[posva]

It looks like Firefox highlights inputs as soon as you touch them using js (input.value = '')
I imagine we could add a condition but I'm not sure if this is just a Firefox bug (https://bugzilla.mozilla.org/show_bug.cgi?id=1399046)

[EdToro74]

I just ran into this issue too. For what its worth, Angular implemented the additional condition check @posva mentioned in order to work-around it. Here's their commit.

[Walkeryr]

Temporary workaround is to dynamically build object for checked property. It wouldn't contain checked key on first render of the component, but it would have it after user interacted with inout. We can pass this object to v-bind directive.

For example:

<template>
<input type="checkbox"
  required
  @change="!this.checked"
  v-bind="getCheckedState()">
</template>

<script>
export default {
  data() {
    return {
      checked: null
    }
  },
  methods: {
    getCheckedState () {
      if (this.checked !== null) {
        return { checked: this.checked }
      }

      return {}
    }
  }
}
</script>