Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

ToxifiedM's avatar

Getting an error when I am trying to filter retrieved data, through advanced search

As I am building a data table, currently I am trying to imply advanced search facility, as I am following the complete series by Caleb Porzio's Livewire Screencast, step by step, I'm currently stuck with applying search filters, or using advanced search option.

https://laravel-livewire.com/screencasts/s7-advanced-search

I'm getting the following error, whenever, I try to search users by using advanced search criteria i.e. email. It filters the data, but throws the error below in loop, if incase I try to search the user with the wrong email, which is not available in the database. It throws me end number of instances of the same error, which is mentioned below.

Uncaught TypeError: Cannot read property 'split' of null
    at LoadingStates.js:174
    at Array.forEach (<anonymous>)
    at startLoading (LoadingStates.js:172)
    at setLoading (LoadingStates.js:143)
    at LoadingStates.js:39
    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)

How The Error Is Produced

Advanced Search - Error Loop

App/Http/Livewire/UserController

public $showFilters = false;
public $filters = [
    'email' => null
];

public function render() {
    $users = User::query() 
        -> when($this -> filters['email'], fn($query, $email) => $query -> where('email', $email))
        -> search('name', $this -> search)
        -> paginate(5);
    $roles = Role::all();
    return view('livewire.user-controller', ['users' => $users, 'roles' => $roles]);
}

resources/views/livewire/user-controller

<div>
    @if ($showFilters)
    <div class="bg-cool-gray-200 p-6 rounded shadow-inner flex relative">
        <div class="w-1/2 pr-2 space-y-4">
            <x-input.group inline for="filter-email" label="Email">
                <x-input.text wire:model.lazy="filters.email" id="filter-email" placeholder="Enter Email" />
            </x-input.group>
        </div>
    </div>
    @endif
</div>
0 likes
0 replies

Please or to participate in this conversation.