I have an HTML form that is connected to a livewire component. The form has default selected options using the <option value="5" selected="selected">5</option>. It appears that livewire is overwriting this and resets the value back to <option value="1">1</option>. Also if I try and submit the form with the default value, I get a validation error.
Here is the validation function in the component:
public function rules () {
return [
'hour_pick' => 'required',
];
}
Here is the blade with the form:
<form wire:submit="save">
<select wire:model="hour_pick" id="p_hr">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7" selected="selected">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</form>
It works if I select different options and don't leave values on default. For example if I select <option value="2">2</option>. It works as intended.
Also I checked this Laravel Livewire: Input select, default option selected which seems to be a similar issue to what I have.
It seems like the solution given in the link above works for that particular case, but I don't think it accurately describes what is happening.
To be clear since the default value on a select is not empty or null, it should pass the validation check, but it doesn't.