Error - While rendering a livewire component inside a modal action

[CamKem]

Package

Actions

Package Version

v3.3.37 - filament

How can we help you?

We have a modal action, that renders a view for the modal content, inside of the modal contents view it is rendering a livewire component, when we click the create control action it opens another slideover with the control form, the issue is when we click submit or close, and the previous ReviewControls modal is re-opened, we are getting a component not found error for the livewire component.

We have added wire:key's in all the normal expected places as per the troubleshooting docs for livewire & spend a bit of time to try and understand why this is happening under the hood, with no luck, so figured we'd report it and see if maybe its a known issue & if there are any fixes for it.

This is the triggering action:

Action::make(ActionName::ReviewControls->value)
            ->registerModalActions([
                Workflow::createControl(
                    action: CreateAction::make(ActionName::ControlsCreate->value)
                        ->createAnother(false),
                    label: ActionLabel::YesAddControl->value
                ),
                Workflow::finaliseNow(
                    action: Action::make(ActionName::ControlsContinue->value)
                ),
            ])
            ->modalContent(static fn (MountableAction $action, ?Risk $record): View => view(
                view: 'filament.resources.risk-resource.review.risk-controls-modal',
                data: [
                    'action' => $action,
                    'record' => $record,
                    'text' => 'Would you like to add an additional control to manage this risk?',
                ],
            ));

This is the view we render for the modal content:

@php
    use App\Enums\Risks\Workflows\ActionName;
    use App\Livewire\ControlsFeed;
@endphp
<div class="flex flex-col items-center justify-start gap-8 h-full py-8">
    <p class="font-semibold text-center w-full">
        {{ $text }}
    </p>

    <div class="w-4/5">
        <livewire:controls-feed
            :riskId="$record->id"
            :singleColumn="true"
            :showHeading="false"
            :latestFirst="true"
        />
    </div>

    <div class="w-full flex items-center justify-center gap-x-6 sticky bottom-0 p-8 bg-white">
        {{ $action->getModalAction(ActionName::ControlsCreate->value) }}
        {{ $action->getModalAction(ActionName::ControlsContinue->value) }}
    </div>
</div>

This is the control feeds livewire components view:

@use(App\Filament\Organisation\Resources\ControlResource\Pages\ViewControl)
<section class="mr-auto flex flex-col">
    @if($showHeading)
        <h2 class="mb-3 font-bold text-base">Controls</h2>
    @endif
    <div class="{{ $singleColumn ? 'grid grid-cols-1 gap-4 pb-2' : 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 pb-2' }}">
    @foreach($controls as $control)
            <a
                    wire:key="control-{{ $control->id }}"
                    href="{{ ViewControl::getUrl(['record' => $control->id], panel: 'organisation', tenant: $organisation) }}"
                    class="bg-white rounded-lg w-full shadow-sm p-4 flex-shrink-0 border border-gray-200 hover:shadow-lg hover:border-gray-300 cursor-pointer transition-all duration-200"
                    aria-label="View control: {{ $control->title }}"
                    title="{{ $control->title }}"
            >
                // control card element
            </a>
        @endforeach
</section>

Here is a screenshot of us going back to the control feed modal, I have echo'd out the component id in red, so we can see that its the same component id as the one in the component not found error:

[leandrocfe]

It would be better if you could create a minimal repo reproducing this issue