© 2026 Hedgehog Software, LLC

TwitterGitHubDiscord
More
CommunitiesDocsAboutTermsPrivacy
Search
Star
Setup for Free
FilamentF
Filament•17mo ago•
3 replies
Jessy

Livewire only works with wire:click

I've been facing the issue where for some reason I can not get wire:modal to work.

I've made work around for it now that uses a search button to force the query to run. But I want to use it live version for filtering.

I'm using a Livewire component in a custom filament page.

<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\Employee;

class EmployeeCards extends Component
{
    public $search = '';
    public $availabilityStart;
    public $availabilityEnd;
    public $age;
    public $language;
    public $sortBy = 'created_at';

    public $employees = [];
    public $availableLanguages = [];

    public function mount()
    {
        $this->filterEmployees(); // Initial data load
    }

    public function filterEmployees()
    {

        // Fetch available languages
        $this->availableLanguages = Employee::pluck('languages')->flatten(1)->pluck('language')->unique()->filter()->values();

        // Get filtered employees
        $query = Employee::query();

        $query->when($this->search, function ($q) {
            $q->where('firstName', 'like', '%' . $this->search . '%')
              ->orWhere('lastName', 'like', '%' . $this->search . '%');
        });

        $query->when($this->availabilityStart && $this->availabilityEnd, function ($q) {
            $q->where('availabilityStart', '<=', $this->availabilityEnd)
              ->where('availabilityEnd', '>=', $this->availabilityStart);
        });

        $query->when($this->age, function ($q) {
            $q->whereRaw('TIMESTAMPDIFF(YEAR, birthdate, CURDATE()) = ?', [$this->age]);
        });

        $query->when($this->language, function ($q) {
            $q->whereJsonContains('languages', [['language' => $this->language]]);
        });

        $this->employees = $query->orderBy($this->sortBy)->get();
    }

    public function render()
    {
        return view('livewire.employee-cards');
    }
}
<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\Employee;

class EmployeeCards extends Component
{
    public $search = '';
    public $availabilityStart;
    public $availabilityEnd;
    public $age;
    public $language;
    public $sortBy = 'created_at';

    public $employees = [];
    public $availableLanguages = [];

    public function mount()
    {
        $this->filterEmployees(); // Initial data load
    }

    public function filterEmployees()
    {

        // Fetch available languages
        $this->availableLanguages = Employee::pluck('languages')->flatten(1)->pluck('language')->unique()->filter()->values();

        // Get filtered employees
        $query = Employee::query();

        $query->when($this->search, function ($q) {
            $q->where('firstName', 'like', '%' . $this->search . '%')
              ->orWhere('lastName', 'like', '%' . $this->search . '%');
        });

        $query->when($this->availabilityStart && $this->availabilityEnd, function ($q) {
            $q->where('availabilityStart', '<=', $this->availabilityEnd)
              ->where('availabilityEnd', '>=', $this->availabilityStart);
        });

        $query->when($this->age, function ($q) {
            $q->whereRaw('TIMESTAMPDIFF(YEAR, birthdate, CURDATE()) = ?', [$this->age]);
        });

        $query->when($this->language, function ($q) {
            $q->whereJsonContains('languages', [['language' => $this->language]]);
        });

        $this->employees = $query->orderBy($this->sortBy)->get();
    }

    public function render()
    {
        return view('livewire.employee-cards');
    }
}
Filament banner
FilamentJoin
A powerful open source UI framework for Laravel • Build and ship admin panels & apps fast with Livewire
20,307Members
Resources
Was this page helpful?

Similar Threads

Recent Announcements

Similar Threads

Cant trigger action modals with wire:click
FilamentFFilament / ❓┊help
5mo ago
wire:click is submitting form.
FilamentFFilament / ❓┊help
3y ago
Livewire 3 wire loading 2 cycles
FilamentFFilament / ❓┊help
2y ago
Prevent wire:click in parent element
FilamentFFilament / ❓┊help
2y ago