Featured Article – Remote Working and Office 365
August 14, 2020
Tech Tip – Use The Timeline
August 21, 2020
LiveWire Logo
LiveWire Logo

Select2 Select Livewire Issue

One of the languages we use to develop systems in Midgard is PHP, and one specialty is Laravel.
 
We have used Laravel in house since Laravel 3, and continue to promote its use. We’ve used this on several projects (see Case Studies for some examples). One of the reasons for using Laravel is its huge support network. If you have an issue, its a good chance someone else has had that exact same issue, and posted their help online. Its not often we get to discover an edge case issue/bug/problem, that doesn’t throw up at least a handful of results on Google.
 
Today we encountered one of these issues, with a combination of Select2 Javascript package, Livewire, and Laravel.
"""
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

Leave a Reply

Your email address will not be published. Required fields are marked *