Livewire Uncaught (in promise) TypeError: Cannot read property 'split' of null

I am using Livewire, and select2 to filter list of records in some table. This is multicriteria search.The select dropdown is set with "multiple" option. When I filter by chosing first item, the list is updated. when I choose another item, the list is updated but I am getting this:

LoadingStates.js:192 Uncaught (in promise) TypeError: Cannot read property 'split' of null
at LoadingStates.js:192
at Array.forEach (<anonymous>)
at startLoading (LoadingStates.js:190)
at setLoading (LoadingStates.js:161)
at LoadingStates.js:50
at MessageBus.js:17
at Array.forEach (<anonymous>)
at MessageBus.value (MessageBus.js:16)
at Object.call (HookManager.js:38)
at Object.callHook (Store.js:120)

And i cannot choose another item, it seems this creates infinite loop because I get it more and more and I am not able anymore to do anything.

The select is blade component. here is its html:

<div>
@props(['datas', 'label'])
<div wire:ignore>
    <select class="form-control select2" >
        @foreach($datas as $key => $item)
            <option value=""></option>
        @endforeach
    </select>
</div>

In my livewire component I use it like:

<div>
     <div class="form-group">
       <label for="myField1" class="font-weight-bold">Field 1 list</label>
       <x-utils.select2 class="form-control multiselect" name="myField1" multiple
                            wire:model="myField1" :datas="$field1datas" label="name"/>
     </div>
</div>
...

<table class="table">
    <tbody>
                        @if ($queryResults->count() > 0)
                        @foreach($queryResults as $key => $a)
                            <tr wire:key="">
                                <td>$a->content</td>
                            </tr>
                        @endforeach
                        @endif
    </tbody>
 </table>

And my livewire component script is :

 function initSelect2() {
    $('.select2').select2({
        allowClear: true,
        placeholder: 'Veuillez faire un choix',
        language: "fr",
        width: "100%",
    }).on('change', function(e){
        console.log($(this).select2("val"));
        @this.set($( this).attr('name'), ( $(this).select2("val") ? $(this).select2("val") : $(this).val() ) );
    });
 }
 initSelect2();
 document.addEventListener("livewire:load", () => {
    Livewire.hook('message.processed', () => {
        initSelect2();
    });
});

It seems the error

TypeError: Cannot read property 'split' of null

is about query datas retuned as the filter result but I don't know why. How to fix this? thanks

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/3vM4Nsc
via IFTTT