F
Filament•6mo ago
Alexandre

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
AlexandreOP•6mo 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
LeandroFerreira•6mo ago
Add live()
Alexandre
AlexandreOP•6mo 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
LeandroFerreira•6mo ago
you should use <input {{ $applyStateBindingModifiers('wire:model') }}="{{ $getStatePath() }}" />
Alexandre
AlexandreOP•6mo 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
LeandroFerreira•6mo ago
share the blade file again, with the changes
Alexandre
AlexandreOP•6mo ago
Gist
View for the CylinderType Input
View for the CylinderType Input. GitHub Gist: instantly share code, notes, and snippets.
LeandroFerreira
LeandroFerreira•6mo ago
there is no problem, I guess are you clicking in the radio input?
Alexandre
AlexandreOP•6mo 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
LeandroFerreira•6mo ago
changing the state with @click I think
Solution
LeandroFerreira
LeandroFerreira•6mo ago
state should also be state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$getStatePath()}')") }}
Alexandre
AlexandreOP•6mo ago
Okay, that's it. It works 🥳 Thank you so much for your help and patience Filament has an amazing community 🙏
Want results from more Discord servers?
Add your server