Filament•3mo ago

Load custom component inside action modal

Ok I think I'm missing something obvious here, but is there a way to load a custom Livewire component inside a modal action? Here's an example of what I've tried

use Filament\Infolists\Components\Actions\Action;

Action::make('something')
    // ->modalContent(view('livewire.my-modal')) // This doesn't work either since it's just the view
    ->livewire(new MyCustomComponent())

use Filament\Infolists\Components\Actions\Action;

Action::make('something')
    // ->modalContent(view('livewire.my-modal')) // This doesn't work either since it's just the view
    ->livewire(new MyCustomComponent())

but it doesn't work (the modal is empty) This is what my component looks like

class MyCustomComponent extends Component implements HasActions, HasForms, HasTable
{
    use HasTabs;
    use InteractsWithActions;
    use InteractsWithForms;
    use InteractsWithTable {
        makeTable as makeBaseTable;
    }

    public function mount(): void
    {
      ...
    }

    public function render(): View
    {
        return view('livewire.my-modal');
    }
}

class MyCustomComponent extends Component implements HasActions, HasForms, HasTable
{
    use HasTabs;
    use InteractsWithActions;
    use InteractsWithForms;
    use InteractsWithTable {
        makeTable as makeBaseTable;
    }

    public function mount(): void
    {
      ...
    }

    public function render(): View
    {
        return view('livewire.my-modal');
    }
}

Solution:

->modalContent(fn (): Htmlable => new HtmlString(Blade::render('@livewire(\'my-modal\')')))

->modalContent(fn (): Htmlable => new HtmlString(Blade::render('@livewire(\'my-modal\')')))

?...

Jump to solution

6 Replies

LeandroFerreira•3mo ago

->modalContent(view('my-view'))

<!-- resources/views/my-view.blade.php -->
<div>
@livewire('my-modal')
</div>

<!-- resources/views/my-view.blade.php -->
<div>
@livewire('my-modal')
</div>

ChesterS•3mo ago

😬 is there no other way? It feels weird having to create a view just to load a Livewire component, especially since there's already a ->livewire() method on the action

Solution

LeandroFerreira•3mo ago

->modalContent(fn (): Htmlable => new HtmlString(Blade::render('@livewire(\'my-modal\')')))

->modalContent(fn (): Htmlable => new HtmlString(Blade::render('@livewire(\'my-modal\')')))

KeyMe•3mo ago

u dont even need the ->livewire() method

ChesterS•3mo ago

😂 Yeah ok, I guess this avoids creating the file. Still feels a bit hacky having to manually render the component. I thought this would be a common enough use case to be supported out-of-the-box by Filament. Anyway, I'll accept you answer since it does work. Thank you!

KeyMe•3mo ago

that is the common method used by manu

Gaming

Programming

Load custom component inside action modal