F
Filament•2d ago
abiroot

Trigger an Event from a custom field blade file

I've been trying to solve this for hours now, without any luck. I have a custom field component with a button in it. When clicking on that button, I want to be able to update a state field in the parent form. I've tried everything, #[On attribute, $listeners and even registerListeners but nothing is being able to caputre the event sent from the blade file. I'm using wire:click="$dispatch('reshuffle')" to dispatch that event.
11 Replies
Dennis Koch
Dennis Koch•2d ago
I've tried everything, #[On attribute, $listeners and even registerListeners but nothing is being able to caputre the event sent from the blade file.
Where did you put this? On the page?
abiroot
abirootOP•2d ago
@Dennis Koch In the blade file of the custom field component This is my structure: Custom action EliminationMatchesAction with the following simplified schema: 
[
    TextInput::make('seed')
        ->reactive()
        ->default(fn() => random_int(1000, 9999)),
    TournamentRoundPreviewField::make('tournament_ranks_table_field')
        ->tournamentUuid(fn($state, $component) => $component->getRecord()->uuid)
        ->seed(fn($get) => $get('seed'))
        ->reactive()
        ->hiddenLabel()
        ->columnSpanFull(),
]
[
    TextInput::make('seed')
        ->reactive()
        ->default(fn() => random_int(1000, 9999)),
    TournamentRoundPreviewField::make('tournament_ranks_table_field')
        ->tournamentUuid(fn($state, $component) => $component->getRecord()->uuid)
        ->seed(fn($get) => $get('seed'))
        ->reactive()
        ->hiddenLabel()
        ->columnSpanFull(),
]
TournamentRoundPreviewField is a custom Filed component with it's own blade file. In that blade file, I'm showing a table of next rounds and a "Refresh Button". I want when the "Refresh Button" from the blade file is clicked, to change the value of the seed TextInput of the EliminationMatchesAction form. I know I could add an action to the EliminationMatchesAction form schema, like: 
Actions::make([
    Actions\Action::make('refresh_seed')
        ->label('Refresh Matches')
        ->icon('heroicon-o-arrow-path')
        ->action(function ($livewire, $set) {
            $newSeed = random_int(1000, 9999);
            $set('seed', $newSeed);
        }),
]),
Actions::make([
    Actions\Action::make('refresh_seed')
        ->label('Refresh Matches')
        ->icon('heroicon-o-arrow-path')
        ->action(function ($livewire, $set) {
            $newSeed = random_int(1000, 9999);
            $set('seed', $newSeed);
        }),
]),
But I want to use the button from the blade
Dennis Koch
Dennis Koch•2d ago
In the blade file of the custom field component
In the Blade file? Those need to be in a Livewire component
abiroot
abirootOP•2d ago
Can I attach a Livewire component directly as a field of a form? Or I must wrap it with a field first?
Dennis Koch
Dennis Koch•2d ago
Pages are Livewire components. Not sure whether fields can be
abiroot
abirootOP•2d ago
Alright I'll try to convert it to a livewire component. Thank's @Dennis Koch I'll report back here when I solve it
Dennis Koch
Dennis Koch•2d ago
You could just put methods you want to call on the action Also you could use $set to set a value, not 100% sure how to access this in the Blade File.
abiroot
abirootOP•2d ago
It seems that there is no direct way for a blade file of a custom field to trigger events back to it's component
Dennis Koch
Dennis Koch•2d ago
Yes, because the field component is not a Livewire component. That's why I say you need to put it on the Page components
awcodes
awcodes•2d ago
abiroot
abirootOP•2d ago
Ok now I understand my problem. My custom Modal: EliminationMatchesAction is not a Livewire component, so it's not listening for dispatched events. If I place the #[On] listener in my EditRecord page, it gets triggered: 
class EditTournament extends EditRecord
{
    protected static string $resource = TournamentResource::class;

    #[On('reshuffle')]
    public function reshuffle(): void
    {
        dd('reshuffle');
    }

    protected function getHeaderActions(): array
    {
        return [
            Actions\DeleteAction::make(),
            DistributeMatchesAction::make(),
            ViewBracketAction::make(),
            EliminationMatchesAction::make(),
            ResetTournamentAction::make(),
        ];
    }
}
class EditTournament extends EditRecord
{
    protected static string $resource = TournamentResource::class;

    #[On('reshuffle')]
    public function reshuffle(): void
    {
        dd('reshuffle');
    }

    protected function getHeaderActions(): array
    {
        return [
            Actions\DeleteAction::make(),
            DistributeMatchesAction::make(),
            ViewBracketAction::make(),
            EliminationMatchesAction::make(),
            ResetTournamentAction::make(),
        ];
    }
}
However, placing the #[On()] listener inside of EliminationMatchesAction doesn't get triggered. I need to update the state ( $set ) of a field (the seed) which is inside of EliminationMatchesAction, on that event, which seems impossible?

Did you find this page helpful?