`Uncaught TypeError: dialog is null` from modal with wire:click

[pkeogan]

Using the demo code given on the docs, I have a table with a modal inside a row. long story short, its snippet of a user management table, with a delete button, that has a modal to confirm you want to delete.

Given that TL;DR here is the code:

...
@foreach($this->users as $user)
    <flux:row :key="$user->id">
...
        <flux:cell>
            <flux:button.group class="justify-end">
                <flux:button>Edit</flux:button>
                <flux:dropdown>
                    <flux:button class="rounded-l-none" icon-trailing="chevron-down"></flux:button>
                    <flux:menu>
                        <flux:modal.trigger name="delete-user-{{$user->id}}">
                            <flux:menu.item variant="danger" icon="trash">Delete</flux:menu.item>
                        </flux:modal.trigger>
                    </flux:menu>
                </flux:dropdown>
            </flux:button.group>
        </flux:cell>
...
    </flux:row>
    <flux:modal name="delete-user-{{$user->id}}" class="min-w-[22rem] space-y-6">
        <div>
            <flux:heading size="lg">Delete User?</flux:heading>
            <flux:subheading class="mb-4 space-y-2">
                <p>Are you sure you want to delete <span class="font-bold">{{ $user->name }}</span>?</p>
                <p>If you delete this user, none of the records associated to this user will be accessible.</p>
            </flux:subheading >
            <flux:card  class="group block flex-shrink-0 -p-4">
                <div class="flex items-center">
                    <div>
                        <img class="inline-block h-9 w-9 rounded-full" src="{{$user->profile_photo_url}}" alt="{{ $user->name }}">
                    </div>
                    <div class="ml-3">
                        <flux:subheading>
                            <p>{{ $user->name }}</p>
                        </flux:subheading>
                    </div>
                </div>
            </flux:card>
        </div>
        <div class="flex gap-2">
            <flux:spacer />
            <flux:modal.close>
                <flux:button variant="ghost">Cancel</flux:button>
            </flux:modal.close>
            <flux:button  wire:click="deleteUser({{$user->id}})" variant="danger">Delete User</flux:button>
        </div>
    </flux:modal>
...
@endforeach
...

When the <flux:button wire:click="deleteUser({{$user->id}})" variant="danger">Delete User</flux:button> calls the wire:click I get the following console error:

Placement of the <flux:modal> within <flux:row> has effect on this error.

[pkeogan]

issue was unrelated to code above.

I had this livewire component edit.blade.php

<flux:modal wire:model="showEditModal" name="edit-user" variant="flyout" class="space-y-6">
...
</flux:modal>

and change it to:

<div>
<flux:modal wire:model="showEditModal" name="edit-user" variant="flyout" class="space-y-6">
...
</flux:modal>
</div>

which fixed the issue.