Grouped Actions don't engage modal.

I do have the modal blade components in my blade file. And they work fine with the infolist on the same page. But they do not work with my actions. Could having an infolist and an action group on the same page cause an issue?

When inspecting the network tab in devtools, I do see successful requests to my app when I click my actions.

<div class="w-full h-full border-gray-300 border-l-0 border p-4 bg-gray-50 overflow-y-auto">

    <div class="max-w-7xl mx-auto">
        <div class="mb-4 flex justify-end px-2">
            <x-filament-actions::group
                :actions="[
                    $this->createAction,
                    $this->deleteAction,
                    $this->importAction,
                ]"
                button="true"
                label="More Actions"
                icon="heroicon-m-ellipsis-vertical"
                color="gray"
                size="sm"
                dropdown-placement="bottom-start"
            />
        </div>
        {{ $this->contactInfolist }}
    </div>

    <div class="my-10"></div>

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

<div class="w-full h-full border-gray-300 border-l-0 border p-4 bg-gray-50 overflow-y-auto">

    <div class="max-w-7xl mx-auto">
        <div class="mb-4 flex justify-end px-2">
            <x-filament-actions::group
                :actions="[
                    $this->createAction,
                    $this->deleteAction,
                    $this->importAction,
                ]"
                button="true"
                label="More Actions"
                icon="heroicon-m-ellipsis-vertical"
                color="gray"
                size="sm"
                dropdown-placement="bottom-start"
            />
        </div>
        {{ $this->contactInfolist }}
    </div>

    <div class="my-10"></div>

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

Solution

This was a function name issue with the action name. Missed this part:

"Add a method that returns your action. The method must share the exact same name as the action, or the name followed by Action."

Jump to solution

Grouped Actions don't engage modal.

<div class="w-full h-full border-gray-300 border-l-0 border p-4 bg-gray-50 overflow-y-auto">

    <div class="max-w-7xl mx-auto">
        <div class="mb-4 flex justify-end px-2">
            <x-filament-actions::group
                :actions="[
                    $this->createAction,
                    $this->deleteAction,
                    $this->importAction,
                ]"
                button="true"
                label="More Actions"
                icon="heroicon-m-ellipsis-vertical"
                color="gray"
                size="sm"
                dropdown-placement="bottom-start"
            />
        </div>
        {{ $this->contactInfolist }}
    </div>

    <div class="my-10"></div>

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

<div class="w-full h-full border-gray-300 border-l-0 border p-4 bg-gray-50 overflow-y-auto">

    <div class="max-w-7xl mx-auto">
        <div class="mb-4 flex justify-end px-2">
            <x-filament-actions::group
                :actions="[
                    $this->createAction,
                    $this->deleteAction,
                    $this->importAction,
                ]"
                button="true"
                label="More Actions"
                icon="heroicon-m-ellipsis-vertical"
                color="gray"
                size="sm"
                dropdown-placement="bottom-start"
            />
        </div>
        {{ $this->contactInfolist }}
    </div>

    <div class="my-10"></div>

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

Solution

Jump to solution

Grouped Actions don't engage modal.

Grouped Actions don't engage modal.

Similar Threads

Similar Threads

Similar Threads