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

ChesterSOP•8mo 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•8mo ago

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

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

KeyMe•8mo ago

u dont even need the ->livewire() method

ChesterSOP•8mo 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•8mo ago

that is the common method used by manu

Gaming

Programming

Load custom component inside action modal