What seems to be the problem: Using the live search - first search doesn’t cause issue. Once adding more characters to the search - without changing the original - you will get “Uncaught TypeError: Cannot read property ‘split’ of null” error.
Steps to Reproduce: Input search string into the search box and let it load - doesn’t matter if it finds results or not. After it loads the results add more RANDOM characters that will cause no results and you will get the error repeatedly.
Are you using the latest version of Livewire: Yes
Do you have any screenshots or code examples:
I have figured out that there is some issue while using @forelse. If you change the code to just @foreach and don’t display any row when there is no search results this error doesn’t happen.
@forelse($traffics as $traffic)
<x-table.row wire:loading.class="opacity-50">
<x-table.cell>{{ $traffic->date_for_display }}</x-table.cell>
<x-table.cell>{{ $traffic->branch }}</x-table.cell>
<x-table.cell>{{ $traffic->io }}</x-table.cell>
<x-table.cell>{{ $traffic->make }}</x-table.cell>
<x-table.cell>{{ $traffic->model }}</x-table.cell>
<x-table.cell>{{ $traffic->sn }}</x-table.cell>
<x-table.cell>{{ $traffic->hours }}</x-table.cell>
<x-table.cell>{{ $traffic->fuel }}</x-table.cell>
<x-table.cell>{{ $traffic->attachments }}</x-table.cell>
<x-table.cell>{{ $traffic->damages }}</x-table.cell>
<x-table.cell>{{ $traffic->customer }}</x-table.cell>
<x-table.cell><x-button.link wire:click="edit({{ $traffic->id }})">Edit</x-button.link></x-table.cell>
</x-table.row>
@empty
<x-table.row>
<x-table.cell colspan="12">
<div class="flex justify-center items-center">
<x-icon.inbox class="h-8 w-8 text-cool-gray-400 space-x-4"/>
<span class="text-xl font-medium py-8 text-cool-gray-500">No Results Found</span>
</div>
</x-table.cell>
</x-table.row>
@endforelse