Filament•2mo 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

Alexandre•2mo 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•2mo ago

Add live()

Alexandre•2mo 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•2mo ago

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

Alexandre•2mo 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•2mo ago

share the blade file again, with the changes

Alexandre•2mo 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•2mo ago

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

Alexandre•2mo 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•2mo ago

changing the state with @click I think

Solution

LeandroFerreira•2mo ago

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

Alexandre•2mo 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