Filament•5mo ago

afterStateUpdated not work on custom field

Hi 👋, I've created a new “TypeCylinder” field in my form. It works fine, except that I can't get the afterStateUpdated() method to work, as it never seems to be called... Any idea why? Here the input on the form :

CylinderType::make('content.cylinder_type.value')
    ->options(array(
        __('users/requests.field.1') => __('users/requests.field.1'),
        __('users/requests.field.2') => __('users/requests.field.2'),
        __('users/requests.field.3') => __('users/requests.field.3')
    ))
    ->hiddenLabel()
    ->afterStateUpdated(function (
        Set $set, $state
    ) {
        dd("Don't work :( ");
    })
    ->columnSpanFull()

CylinderType::make('content.cylinder_type.value')
    ->options(array(
        __('users/requests.field.1') => __('users/requests.field.1'),
        __('users/requests.field.2') => __('users/requests.field.2'),
        __('users/requests.field.3') => __('users/requests.field.3')
    ))
    ->hiddenLabel()
    ->afterStateUpdated(function (
        Set $set, $state
    ) {
        dd("Don't work :( ");
    })
    ->columnSpanFull()

The field class (CylinderType.php) :

namespace App\Forms\Components;

use Filament\Forms\Components\Concerns\HasOptions;
use Filament\Forms\Components\Field;

class CylinderType extends Field
{
    use HasOptions;
    protected string $view = 'forms.components.cylinder-type';
}

namespace App\Forms\Components;

use Filament\Forms\Components\Concerns\HasOptions;
use Filament\Forms\Components\Field;

class CylinderType extends Field
{
    use HasOptions;
    protected string $view = 'forms.components.cylinder-type';
}

Solution:

state should also be state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$getStatePath()}')") }}...

Jump to solution

12 Replies

AlexandreOP•5mo ago

And the view :

@php
    $id = $getId();
    $statePath = $getStatePath();
    $options = $getOptions();
@endphp

<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
    <div
        class="..."
        x-data="{ state: $wire.$entangle('{{ $getStatePath() }}'), }"
    >
        @foreach ($options as $value => $label)
            @php
                $inputId = "{$id}-{$value}";
                $shouldOptionBeDisabled = $isDisabled || $isOptionDisabled($value, $label);
            @endphp
            <label
                for="{{ $inputId }}"
                x-on:click="state = '{{ $value }}'"
                class="..."
            >
                @if($value === __('users/requests.field.1') )
                    <img src="..."
                         alt="..."
                         height="200">
                @elseif($value === __('users/requests.field.2') )
                    <img src="..."
                         alt="..." height="200">
                @else
                    <img src="..."
                         alt="..." height="200">
                @endif
                <div class="...">
                    <input type="radio"
                        id="{{ $inputId }}"
                        value="{{ $value }}"
                        wire:model="{{ $getStatePath() }}"
                        x-model="state"
                        class="...">
                    <span class="...">{{ $value }}</span>
                </div>
            </label>
        @endforeach
    </div>
</x-dynamic-component>

@php
    $id = $getId();
    $statePath = $getStatePath();
    $options = $getOptions();
@endphp

<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
    <div
        class="..."
        x-data="{ state: $wire.$entangle('{{ $getStatePath() }}'), }"
    >
        @foreach ($options as $value => $label)
            @php
                $inputId = "{$id}-{$value}";
                $shouldOptionBeDisabled = $isDisabled || $isOptionDisabled($value, $label);
            @endphp
            <label
                for="{{ $inputId }}"
                x-on:click="state = '{{ $value }}'"
                class="..."
            >
                @if($value === __('users/requests.field.1') )
                    <img src="..."
                         alt="..."
                         height="200">
                @elseif($value === __('users/requests.field.2') )
                    <img src="..."
                         alt="..." height="200">
                @else
                    <img src="..."
                         alt="..." height="200">
                @endif
                <div class="...">
                    <input type="radio"
                        id="{{ $inputId }}"
                        value="{{ $value }}"
                        wire:model="{{ $getStatePath() }}"
                        x-model="state"
                        class="...">
                    <span class="...">{{ $value }}</span>
                </div>
            </label>
        @endforeach
    </div>
</x-dynamic-component>

LeandroFerreira•5mo ago

Add live()

AlexandreOP•5mo ago

Thanks for your reply 🙂 I've just tried it, but it's the same thing: when I click on one of my inputs, nothing happens...

CylinderType::make('content.cylinder_type.value')
    ->options(array(
        __('users/requests.field.1') => __('users/requests.field.1'),
        __('users/requests.field.2') => __('users/requests.field.2'),
        __('users/requests.field.3') => __('users/requests.field.3')
    ))
    ->hiddenLabel()
    ->live()
    ->afterStateUpdated(function (
        Set $set, $state
    ) {
        dd("Don't work :( ");
    })
    ->columnSpanFull()

CylinderType::make('content.cylinder_type.value')
    ->options(array(
        __('users/requests.field.1') => __('users/requests.field.1'),
        __('users/requests.field.2') => __('users/requests.field.2'),
        __('users/requests.field.3') => __('users/requests.field.3')
    ))
    ->hiddenLabel()
    ->live()
    ->afterStateUpdated(function (
        Set $set, $state
    ) {
        dd("Don't work :( ");
    })
    ->columnSpanFull()

Is there anything missing in my component view to make the afterStateUpdated() functional? My aim is to change the value of another field according to what we've chosen. Maybe is there any other way?

LeandroFerreira•5mo ago

you should use <input {{ $applyStateBindingModifiers('wire:model') }}="{{ $getStatePath() }}" />

AlexandreOP•5mo ago

Thanks again for your help. I just made the change. I don't get my DD() if I click on one of my radio buttons from my CylinderType input. However, I've noticed that if I click on any other input with a ->live() method, the DD() from my afterStateUpdated() appears.

LeandroFerreira•5mo ago

share the blade file again, with the changes

AlexandreOP•5mo ago

Here you are : https://gist.github.com/AlexandreCConcept/0e7ec7bf3bb5b2f2c54ec5fc8803f23c Thanks for your time

Gist

View for the CylinderType Input

View for the CylinderType Input. GitHub Gist: instantly share code, notes, and snippets.

LeandroFerreira•5mo ago

there is no problem, I guess are you clicking in the radio input?

AlexandreOP•5mo ago

Ah... I feel very stupid right now... 🫣 I'm sorry... I clicked on the label, which then selected the radio... Is it possible to have the afterStateUpdated called when the label is clicked? 🤔

LeandroFerreira•5mo ago

changing the state with @click I think

Solution

LeandroFerreira•5mo ago

state should also be state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$getStatePath()}')") }}

AlexandreOP•5mo ago

Okay, that's it. It works 🥳 Thank you so much for your help and patience Filament has an amazing community 🙏

Gaming

Programming

afterStateUpdated not work on custom field