Validating v-model on <select> element fails to update model in deep level components [Firefox/Linux]

Versions

• vee-validate: ^2.10
• vue: ^2.5.7

Describe the bug I have a top component level and a 2 level child component. When I use v-validate on a select element (of course with v-model) at the top level component, the validation works smoothly. Nevertheless when I use the v-validate directive on a select that belongs to a child component, if you click on the select element and then select an option, the model fails to be updated so is the list render.

This bug happens on Firefox in a Ubuntu 16.04 installation.

Example behavior in the following GIF:

Expected behavior I expect the select list to be properly updated as the model

Additional context

If I remove the v-validate directive, the select list works normally.

Issue code

<div class="col-md-4">
    <div class="form-group" >
        <select name="party" id="party" class="form-control" v-model="dm.parties_id" v-validate="'required'">
            <option value="">Choose Party</option>
            <option v-for="(party) in parties" v-bind:key=party.id :value=party.id>{{party.name}}</option>
        </select>
        <div class="errors">
            <p v-show="errors.has('party')">Please select a party</p>
        </div>                      
    </div>
</div>
<div class="col-md-4">
    <div class="form-group">
        <select name="position" id="position" class="form-control" v-model="dm.position_id" v-validate="'required'">
            <option value=""> Choose Position</option>
            <option v-for="(position) in positions" v-bind:key=position.id :value=position.id>{{position.name}}</option>
        </select>
        <div class="errors">
            <p v-show="errors.has('position')">Please choose a position</p>
        </div>        
    </div>
</div>
<div class="col-md-4">
    <div class="form-group">
        <select name="influence" id="influence" class="form-control" v-model="dm.influence" v-validate="'required'">
            <option value=""> Select influence</option>
            <option v-for="(inf, index) in influence" v-bind:key=index :value=index>{{inf}}</option>
        </select>
        <div class="errors">
            <p v-show="errors.has('influence')">Please select influence</p>
        </div>                    
    </div>                
</div>

[logaretm]

huh, I’m using developers edition too. Will try the mainstream build.

EDIT: works as well on windows devices, the issue happens for the same reason inputs were getting locked in some cases, meaning the validation occurs on an event that is different than the model updated causing the model to reset each time when the UI updates because of the error bag changes.

Upon logging the events used for the select, it was the input event. It should be change since not all browsers on all OSes respect the spec although it specifically dictates all input types should emit the input event. Anyways looks like this is an issue of vee-validate itself not recognizing the correct event for the select element, I have created a PR for this here #1551

[ThomHurks]

I’ve had issues with browsers not using input/change etc according to spec before. Figures it’s something like that.