Select2 Select Livewire Issue
""" Livewire encountered corrupt data when trying to hydrate the [search] component. \n Ensure that the [name, id, data] of the Livewire component wasn't tampered with between requests. """
What We Did
We are using Livewire to generate a live search result for our client, using multiple search options. One of the options allows them to select multiple Engineers to search at the same time (Show all jobs assigned to “john”,”Jake”,”sam”, etc.
Without Select2, everything worked fine. Multiple select worked out of the box (Thank you Livewire!).
But, adding Select2 Started issues.
First we had to do, was (again Thank you LIVEWIRE) was read the Documentation, Specifically
https://laravel-livewire.com/docs/alpine-js#creating-a-datepicker
(Search for : “Ignoring DOM-changes (using wire:ignore)” ) and followed their instructions.
This resulted in it kind of working.
<div class="form-group row " wire:ignore>
<label for='day' class='control-label col-md-3'>Engineers</label>
<div class='col-md-9'>
<div class="form-control-wrap ">
<div class=''>
<select name="engineerSearch[]" id='engineerSearch' wire:model="engineerSearch" class='form-select-engineerSearch' multiple>
@foreach($engineers as $engineerID => $name)
<option value="{{$engineerID}}">{{$name}}</option>
@endforeach
</select>
<!-- Select2 will insert it's DOM here. -->
</div>
</div>
</div>
</div>
$('.form-select-engineerSearch').select2({width: '100%', sorter: data => data.sort((a, b) => a.text.localeCompare(b.text)),});
$('.form-select-engineerSearch').on('change', function (e) {
var data = $('.form-select-engineerSearch').select2("val");
@this.set('engineerSearch', data);
});
But now we got this error which completely stumped us.
""" Livewire encountered corrupt data when trying to hydrate the [search] component. \n Ensure that the [name, id, data] of the Livewire component wasn't tampered with between requests. """
No matter what I changed, this error stayed. So when debugging, I hard coded in a few dummy engineers…and it worked.
So the answer to this issue, was simply this:
One of the engineers in the Database had a space at the end of the name. When Select2 first generates the drop downs, it actually trims off extra spaces at the end, but when Livewire re-generated the select list, it added in the original list. This meant the livewire changed a part of the componant that I didnt want it too.
Simply by going through and adding rules and Trims on the creation of names, the system now, works fine.
So an answer to what is causing this issue? Select2 trims select options. So if your data has a space at the end. It may cause things to act…screwy.
Hope this helps someone else out there from this issue.
LIVEWIRE ERROR:
Date:
Aug 14, 2020
Categories:
Factory, Industry, Manufacturing
Software:
Laravel 7, Livewire, Select2, Mysql
Error:
Livewire encountered corrupt data when trying to hydrate the [search] component. \n Ensure that the [name, id, data] of the Livewire component wasn't tampered with between requests. """
Completed:
2020
