livewire updated hook not firing inside livewire's form

Question

I'm using livewire 3 to make simple search form

The form :

namespace App\Livewire\Forms;

use Livewire\Attributes\Rule;
use Livewire\Form;

class OutputForm extends Form
{
    public $search = '';

    public $employees = '';

    public function updatedSearch()
    {
        $this->employees = \App\Models\Employee::search($this->search)->get();
    }

}

blade :

<div class="col-lg-6 mx-4">
    <div class="form-floating mb-3">
        <input class="form-control" id="search" type="text" wire:model.live.debounce.500ms="form.search"/>
        <label for="search">Find employee</label>           
    </div>
    @if (!is_null($form->employees) || !empty($form->employees))          
    @foreach ($form->employees as $employe)
        <li>{{ $employee->name }}</li>
    @endforeach
    @endif
</div>

It will work if i use regular livewire's component But Is it possible to fire the updated() hook inside form ? I already tried it, but it seems that the updated() hook isn't firing, how to solve this ?

Answer 1

By the looks of things, the Form component does not handle any lifecycle hooks. There's 2 things you can do:

• You can hook the updated lifecycle method on your main component (see docs)

class YourComponent extends Component
{
    public OutputForm $form;
 
    public function updated($field, $value)
    {
        if ($field == 'form.search') {
            $this->form->updatedSearch();
        }
    }

    // OR 
 
    public function updatedFormSearch($value, $field) 
    {
        $this->form->updatedSearch();
        // $field here is 'search', not 'form.search'!
    }
}

• You can use the Form component as trait and hook into it with updatedOutputForm (see docs). It isn't documented but just like any updated method it returns the $field and $value

trait OutputForm 
{
    public $search = '';

    //

    public function updatedOutputForm($field, $value)
    {
        if ($field === 'search') {
            $this->updatedSearch();
        }      
    }

    // OR
    
    public function updatedSearch($value)
    {
        // This does trigger, whether it's in this trait or in the main component
    }
}


class YourComponent extends Component
{
    use OutputForm;
}