Filament•11mo ago

Action modal in livewire component not working

I am having an issue displaying a modal in a livewire component using a Filament Action I have followed the docs from: https://filamentphp.com/docs/3.x/actions/adding-an-action-to-a-livewire-component This is how it looks like:

class MyTab extends Component implements HasForms, HasActions
{
    use InteractsWithActions;
    use InteractsWithForms;


    public function addReadingAction(): Action
    {
        return Action::make('Modal')
            ->form([ $this->getReadingsForm() ])
            ->action( function ($data) {
                dd($data);
            });
    }

//...

}

class MyTab extends Component implements HasForms, HasActions
{
    use InteractsWithActions;
    use InteractsWithForms;


    public function addReadingAction(): Action
    {
        return Action::make('Modal')
            ->form([ $this->getReadingsForm() ])
            ->action( function ($data) {
                dd($data);
            });
    }

//...

}

The component:

        <div class="flex justify-between align-middle my-8">
            <h2 class="text-2xl font-bold">Readings</h2>
            {{ $this->addReadingAction }}
        </div>
        
        <x-filament-actions::modals />

        <div class="flex justify-between align-middle my-8">
            <h2 class="text-2xl font-bold">Readings</h2>
            {{ $this->addReadingAction }}
        </div>
        
        <x-filament-actions::modals />

The button shows, on click it loads, but no modal appears When I apply this same action in a Filament page it works and shows correctly, I am unsure to why this is...

Adding an action to a Livewire component - Actions - Filament

Solution:

Action::make(‘addReading’). The action name needs to match the method name.

Jump to solution

5 Replies

Solution

awcodes•11mo ago

Action::make(‘addReading’). The action name needs to match the method name.

bakriawadOP•11mo ago

That actually works.. thank you very much

Masea•11mo ago

class SyncStatusButton extends Component implements HasForms, HasActions
{
    use InteractsWithActions, InteractsWithForms;

    public ?Product $record = null;

    public function render()
    {
        return view('filament.livewire.trendyol.sync-status-button');
    }

    public function syncAction(): Action
    {
        return Action::make('sync')
            ->label('Eşleşme')
            ->link()
            ->color('danger')
            ->icon('heroicon-o-x-mark')
            ->visible(fn () => $this->record && $this->record->trendyol)
            ->form([
                Checkbox::make('delete_data')
                    ->label('Veriyi de sil')
                    ->helperText('İşaretlenirse ürün verisi de silinir.')
            ])
            ->action(function($data) {
                foreach ($this->record->variants as $variant)
                    $variant->trendyol->unsync($data["delete_data"]);

                return redirect($data["delete_data"] ? ProductResource::getUrl('index') : ProductResource::getUrl('edit', ['record' => $this->record]));
            });
    }
}

class SyncStatusButton extends Component implements HasForms, HasActions
{
    use InteractsWithActions, InteractsWithForms;

    public ?Product $record = null;

    public function render()
    {
        return view('filament.livewire.trendyol.sync-status-button');
    }

    public function syncAction(): Action
    {
        return Action::make('sync')
            ->label('Eşleşme')
            ->link()
            ->color('danger')
            ->icon('heroicon-o-x-mark')
            ->visible(fn () => $this->record && $this->record->trendyol)
            ->form([
                Checkbox::make('delete_data')
                    ->label('Veriyi de sil')
                    ->helperText('İşaretlenirse ürün verisi de silinir.')
            ])
            ->action(function($data) {
                foreach ($this->record->variants as $variant)
                    $variant->trendyol->unsync($data["delete_data"]);

                return redirect($data["delete_data"] ? ProductResource::getUrl('index') : ProductResource::getUrl('edit', ['record' => $this->record]));
            });
    }
}

Why this doesnt work on my end though? @awcodes

<div>
    <div wire:poll.10s class="flex items-center justify-end">
        @if ($this->syncAction->isVisible())
            {{ $this->syncAction }}
        @endif
    </div>

    <x-filament-actions::modals />
</div>

<div>
    <div wire:poll.10s class="flex items-center justify-end">
        @if ($this->syncAction->isVisible())
            {{ $this->syncAction }}
        @endif
    </div>

    <x-filament-actions::modals />
</div>

I am displaying this component on a filament form btw The reason i am using a component instead of an action on the form is because i want it to be updated on the go thus the wire:poll attribute

awcodes•11mo ago

You don’t need the if visible in your blade view. It will show hide itself based on the visible callback automatically. But what exactly isn’t working?

Masea•11mo ago

modal won't open backdrop is not visible either I click the button, it loads for a a bit but the modal won't open

Gaming

Programming

Action modal in livewire component not working