Flux modal prevents Livewire 4 wire:transition exit animation when deleting list item

Flux version

v2.15.0

Livewire version

4.3.3

Tailwind version

4.3.2

Browser and Operating System

Firefox and Chrome on Windows 11

What is the problem?

I have a Livewire 4 component that renders a list of items. Each item uses wire:transition.

When I delete an item directly from the list using wire:click="remove({{ $source->id }})", the item is removed with the expected smooth transition.

However, when I open a <flux:modal> confirmation dialog first and then trigger the same delete action from inside the modal, the item is removed abruptly without the wire:transition exit animation.

The delete action itself works correctly. The issue is only that the exit transition is lost when the action is triggered from inside the Flux modal.

Code snippets to replicate the problem

@forelse ($this->sources as $source)
    <div
        wire:transition
        wire:key="source-{{ $source->id }}"
        class="flex relative flex-1 my-1 p-3 border rounded-xl overflow-hidden"
    >
        <span>{{ $source->name }}</span>

        <flux:modal.trigger name="remove-source-{{ $source->id }}">
            <flux:button
                variant="filled"
                size="sm"
                icon="trash"
            />
        </flux:modal.trigger>

        <flux:modal name="remove-source-{{ $source->id }}" class="min-w-88">
            <div class="space-y-6">
                <div>
                    <flux:heading size="lg">
                        Delete source?
                    </flux:heading>

                    <flux:text class="mt-2">
                        <p>Are you sure you want to delete this source?</p>
                        <p>Once deleted, it cannot be recovered.</p>
                    </flux:text>
                </div>

                <div class="flex gap-2">
                    <flux:spacer />

                    <flux:modal.close>
                        <flux:button type="button" variant="ghost">
                            Cancel
                        </flux:button>
                    </flux:modal.close>

                    <flux:button
                        type="button"
                        variant="danger"
                        wire:click="remove({{ $source->id }})"
                    >
                        Delete
                    </flux:button>
                </div>
            </div>
        </flux:modal>
    </div>
@empty
    <div wire:transition>
        No sources at this time.
    </div>
@endforelse

Also, this direct version works correctly and the transition is visible:

<flux:button
    variant="filled"
    size="sm"
    icon="trash"
    wire:click="remove({{ $source->id }})"
/>

Using wire:confirm also works because the delete action is triggered directly from the list item:

<flux:button
    variant="filled"
    size="sm"
    icon="trash"
    wire:click="remove({{ $source->id }})"
    wire:confirm="Are you sure you want to delete this source?"
/>

Screenshots/ screen recordings of the problem

I can provide a screen recording if needed.

Observed behavior:

• Direct delete from the list: wire:transition works.
• Delete from inside <flux:modal>: the item disappears abruptly.

How do you expect it to work?

I expect the list item to use the same wire:transition exit animation when it is deleted from a Flux confirmation modal as it does when deleted directly from the list.

The modal should not prevent or interfere with the Livewire 4 view transition of the item being removed.

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.