When trying to implement https://laravel-livewire.com/docs/2.x/input-validation - Real-time Validation I noticed a problem. Let's assume that we have 3 inputs with real time validation, if I type into first one some value and click tab to go to next input, again i enter the value and go to 3 input, the second and/or third input will glitch because there are 3 request(in case you use https://laravel-livewire.com/docs/2.x/properties#lazy-updating) or even more request if you don't use it. And because of this the value from second and/or third input disappear until all request hit the server. This can be notices with normal internet connection, but with slow internet it's even more obvious.
Steps to reproduce:
- Create a livewire component with this content
namespace App\Http\Livewire;
use Livewire\Component;
class ShowPosts extends Component
{
protected $rules = [
'field1' => 'required',
'field2' => 'required',
'field3' => 'required',
];
public $field1;
public $field2;
public $field3;
public function updated($propertyName)
{
$this->validateOnly($propertyName, $this->rules);
}
public function render()
{
return view('livewire.show-posts');
}
}
- And this view
<div>
<form wire:submit.prevent="submit">
<div class="form-group mb-3 col-12">
<input class="form-control" type="text" wire:model="field1">
</div>
<div class="form-group mb-3 col-12">
<input class="form-control" type="text" wire:model="field2">
</div>
<div class="form-group mb-3 col-12">
<input class="form-control" type="text" wire:model="field3">
</div>
</form>
</div>
- Include it in a blade view with @livewire('show-posts')
- In chrome dev tools go to network->online dropdown->select slow 3g connection
- Try to enter value for each input and go to next with tab, you will notice that value from previous input disappear or change to the last value that was before modification
What can be done to avoid this disappearing/changing of the input value?