Filament•12mo ago

afterStateUpdated in custom component

I have a Filament widget which includes a Livewire component from it's blade. I have a select-field rendering fine and it will update the value. However, I can't get it to run method no matter what I do. Here is the code I've been trying with:

namespace App\Http\Livewire;
...
use Livewire\Component;

class CompanyComparisonForm extends Component implements HasForms
{
    use InteractsWithForms;

    protected $form;
    public $technologies;

    public function formFieldUpdated($propertyName, $value)
    {
        // never gets here
        Log::error('formFieldUpdated2');
    }

    public function render()
    {
        $this->form = $this->makeForm()
            ->schema([
                Select::make('technologies')
                    ->reactive()
                    //->callAfterStateUpdated()
                    ->afterStateUpdated(function ($state) {
                        // never gets here either
                        Log::error('Updating...');
                        // tried these too
                        //$this->formFieldUpdated('technologies', $state);
                        //$this->dispatch('formFieldUpdated', $state);
                    })
                    // these don't make a difference
                    //->live()
                    //->native()
                    ->options([
                        'tailwind' => 'Tailwind CSS',
                        'alpine' => 'Alpine.js',
                        'laravel' => 'Laravel',
                        'livewire' => 'Laravel Livewire',
                    ])
            ])

            // this also doesn't change whether it's enabled or not
            ->live();
        return view('livewire.company-comparison-form');
    }
}`

namespace App\Http\Livewire;
...
use Livewire\Component;

class CompanyComparisonForm extends Component implements HasForms
{
    use InteractsWithForms;

    protected $form;
    public $technologies;

    public function formFieldUpdated($propertyName, $value)
    {
        // never gets here
        Log::error('formFieldUpdated2');
    }

    public function render()
    {
        $this->form = $this->makeForm()
            ->schema([
                Select::make('technologies')
                    ->reactive()
                    //->callAfterStateUpdated()
                    ->afterStateUpdated(function ($state) {
                        // never gets here either
                        Log::error('Updating...');
                        // tried these too
                        //$this->formFieldUpdated('technologies', $state);
                        //$this->dispatch('formFieldUpdated', $state);
                    })
                    // these don't make a difference
                    //->live()
                    //->native()
                    ->options([
                        'tailwind' => 'Tailwind CSS',
                        'alpine' => 'Alpine.js',
                        'laravel' => 'Laravel',
                        'livewire' => 'Laravel Livewire',
                    ])
            ])

            // this also doesn't change whether it's enabled or not
            ->live();
        return view('livewire.company-comparison-form');
    }
}`

The view has nothing else than this:

<div>
    {{$technologies}}
    {{ $this->form }}
</div>

<div>
    {{$technologies}}
    {{ $this->form }}
</div>

Any help here would be greatly appreciated (and yes, I've been reading documentation and other posts back and forth)!

1 Reply

toeknee•12mo ago

You need live() in v3 but you also need to mount the form

public function mount() {
  $this->form->fill();
}

public function mount() {
  $this->form->fill();
}

Gaming

Programming

afterStateUpdated in custom component