Load action modal in different livewire component

Hi there!

I was wondering if there is a way to load a action modal/slide-over in a different livewire component than what it was created in.

I am looking at needing this as the app layout is based on normal blade templates, and z indexes and stuff interfer and makes the slide overs and modal render "inside" the space for the component which called it, not the whole page (which is wanted behaviour).

Any way to do this? Tried having a read at the docs, but my brain is completely fried...

Solution

Well... yeah it's not as simple as a Filament action, but I think in this example the Livewire component would contain both the modal and the form, something like this:

<div id="custom-livewire-component">
    <x-filament::modal id="custom-form">
        <form wire:submit="create">
            {{ $this->form }}
            
            <button type="submit">
                Submit
            </button>
        </form>
    </x-filament::modal>
</div>

<div id="custom-livewire-component">
    <x-filament::modal id="custom-form">
        <form wire:submit="create">
            {{ $this->form }}
            
            <button type="submit">
                Submit
            </button>
        </form>
    </x-filament::modal>
</div>

Jump to solution

Filament•3y ago•

26 replies

skybert

Load action modal in different livewire component

Solution

Well... yeah it's not as simple as a Filament action, but I think in this example the Livewire component would contain both the modal and the form, something like this:

<div id="custom-livewire-component">
    <x-filament::modal id="custom-form">
        <form wire:submit="create">
            {{ $this->form }}
            
            <button type="submit">
                Submit
            </button>
        </form>
    </x-filament::modal>
</div>

<div id="custom-livewire-component">
    <x-filament::modal id="custom-form">
        <form wire:submit="create">
            {{ $this->form }}
            
            <button type="submit">
                Submit
            </button>
        </form>
    </x-filament::modal>
</div>

Jump to solution

Load action modal in different livewire component

Load action modal in different livewire component

Similar Threads

Similar Threads

Similar Threads