flux:checkbox.group + flux:switch inside table causes select-all to trigger unexpectedly

[EhsanGhafoori]

Flux version

v2

Livewire version

v3.7

Tailwind version

v4

Browser and Operating System

chrome

What is the problem?

Describe the bug

When using <flux:checkbox.group> with <flux:checkbox.all /> and also placing a <flux:switch> inside the same group (inside a table), toggling the switch ends up triggering the "select all" behavior unexpectedly.

Steps to reproduce

1. Create a table with <flux:checkbox.group>
2. Add <flux:checkbox.all /> for select all
3. Add rows with <flux:checkbox /> and also <flux:switch> in another column
4. Toggling the switch causes all checkboxes to become selected

Expected behavior

Toggling the switch should not affect checkbox group selection.

Code example

<flux:checkbox.group wire:model="selectedBanks">
  <flux:checkbox.all />
  ...
  <flux:switch ... />
</flux:checkbox.group>


### Code snippets to replicate the problem

 <flux:checkbox.group wire:model.live="selectedBanks">
        <flux:table :paginate="$banks">
            <flux:table.columns>
                <flux:table.column>
                    <flux:checkbox.all />
                </flux:table.column>
                <flux:table.column>Logo</flux:table.column>
                <flux:table.column sortable :sorted="$sortBy === 'name'" :direction="$sortDirection"
                    wire:click="sort('name')">Name</flux:table.column>
                <flux:table.column sortable :sorted="$sortBy === 'short_name'" :direction="$sortDirection"
                    wire:click="sort('short_name')">Short Name</flux:table.column>
                <flux:table.column sortable :sorted="$sortBy === 'swift_code'" :direction="$sortDirection"
                    wire:click="sort('swift_code')">SWIFT Code</flux:table.column>
                <flux:table.column>Active</flux:table.column>
                <flux:table.column>Actions</flux:table.column>
                <flux:table.column>Website</flux:table.column>
                <flux:table.column sortable :sorted="$sortBy === 'created_at'" :direction="$sortDirection"
                    wire:click="sort('created_at')">Created At</flux:table.column>
                <flux:table.column>Created By</flux:table.column>
                <flux:table.column sortable :sorted="$sortBy === 'updated_at'" :direction="$sortDirection"
                    wire:click="sort('updated_at')">Updated At</flux:table.column>
                <flux:table.column>Updated By</flux:table.column>
            </flux:table.columns>
            <flux:table.rows>
                @forelse ($banks as $bank)
                    <flux:table.row :key="$bank->id">
                        <flux:table.cell>
                            <flux:checkbox value="{{ (string) $bank->id }}" />
                        </flux:table.cell>
                        <flux:table.cell>
                            @if ($bank->logo)
                                <img src="{{ asset($bank->logo) }}" alt="{{ $bank->name }}" class="w-10 h-10 object-contain rounded">
                            @else
                                <div class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded flex items-center justify-center">
                                    <flux:icon name="building-library" class="w-5 h-5 text-gray-400" />
                                </div>
                            @endif
                        </flux:table.cell>
                        <flux:table.cell>
                            <div class="font-medium">{{ $bank->name }}</div>
                        </flux:table.cell>
                        <flux:table.cell>
                            <span class="font-mono font-semibold text-blue-600 dark:text-blue-400">{{ $bank->short_name }}</span>
                        </flux:table.cell>
                        <flux:table.cell>
                            @if($bank->swift_code)
                                <span class="font-mono text-sm">{{ $bank->swift_code }}</span>
                            @else
                                <flux:text class="text-gray-400">N/A</flux:text>
                            @endif
                        </flux:table.cell>
                        <flux:table.cell>
                            {{-- <flux:field variant="inline">
                                <flux:switch 
                                    :checked="$bank->is_active"
                                    wire:click="toggleActive({{ $bank->id }})" />
                            </flux:field> --}}
                            <div wire:ignore>
                                <flux:switch
                                    :checked="$bank->is_active"
                                    x-on:click.stop
                                    wire:click.stop="toggleActive({{ $bank->id }})"
                                />
                            </div>
                        </flux:table.cell>
                        <flux:table.cell>
                            <div class="flex items-center">
                                <flux:tooltip content="Edit" position="bottom">
                                    <flux:button 
                                        variant="ghost" 
                                        size="sm"
                                        square
                                        wire:click="editBank({{ $bank->id }})"
                                        x-on:click="$flux.modal('bank-modal').show()"
                                    >
                                        <flux:icon.pencil-square class="text-blue-600 dark:text-blue-300 size-5" />
                                    </flux:button>
                                </flux:tooltip>
                                <flux:tooltip content="Delete" position="bottom">
                                    <flux:button 
                                        variant="ghost" 
                                        size="sm"
                                        square
                                        wire:click="confirmDelete({{ $bank->id }})"
                                    >
                                        <flux:icon.trash class="text-red-600 dark:text-red-400 size-5" />
                                    </flux:button>
                                </flux:tooltip>
                            </div>
                        </flux:table.cell>
                        <flux:table.cell>
                            @if($bank->website)
                                <a href="{{ $bank->website }}" target="_blank" class="text-blue-600 dark:text-blue-400 hover:underline text-sm truncate max-w-32 inline-block">
                                    {{ parse_url($bank->website, PHP_URL_HOST) }}
                                </a>
                            @else
                                <flux:text class="text-gray-400">N/A</flux:text>
                            @endif
                        </flux:table.cell>
                        <flux:table.cell>
                            @if($bank->created_at)
                                <div class="text-gray-500 dark:text-gray-300">
                                    {{ $bank->created_at->format('d-m-Y') }}
                                    <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-300 rounded-lg px-2 py-1">
                                        {{ $bank->created_at->format('H:i') }}
                                    </span>
                                </div>
                            @else
                                <flux:text class="text-gray-400">N/A</flux:text>
                            @endif
                        </flux:table.cell>
                        <flux:table.cell>
                            @if($bank->creator)
                                <span class="text-sm">{{ $bank->creator->name }}</span>
                            @else
                                <flux:text class="text-gray-400 text-sm">N/A</flux:text>
                            @endif
                        </flux:table.cell>
                        <flux:table.cell>
                            @if($bank->updated_at)
                                <div class="text-gray-500 dark:text-gray-300">
                                    {{ $bank->updated_at->format('d-m-Y') }}
                                    <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-300 rounded-lg px-2 py-1">
                                        {{ $bank->updated_at->format('H:i') }}
                                    </span>
                                </div>
                            @else
                                <flux:text class="text-gray-400">N/A</flux:text>
                            @endif
                        </flux:table.cell>
                        <flux:table.cell>
                            @if($bank->updater)
                                <span class="text-sm">{{ $bank->updater->name }}</span>
                            @else
                                <flux:text class="text-gray-400 text-sm">N/A</flux:text>
                            @endif
                        </flux:table.cell>
                    </flux:table.row>
                @empty
                    <flux:table.row>
                        <flux:table.cell colspan="9" class="text-center py-8">
                            <div class="flex flex-col items-center gap-2">
                                <flux:icon name="building-library" class="w-12 h-12 text-gray-400" />
                                <flux:text class="text-gray-500 dark:text-gray-400">No banks found</flux:text>
                            </div>
                        </flux:table.cell>
                    </flux:table.row>
                @endforelse
            </flux:table.rows>
        </flux:table>
    </flux:checkbox.group>

### Screenshots/ screen recordings of the problem

![Image](https://github.com/user-attachments/assets/c5dff5a1-9a74-4273-aa70-0dde3d7fdc19)

### How do you expect it to work?

The checkbox group should only react to checkbox-related interactions.

Toggling a <flux:switch> inside the same table should:
- Only trigger its own Livewire action (e.g. toggleActive)
- Not affect the state of <flux:checkbox.group>
- Not trigger <flux:checkbox.all>
- Not select or deselect any row checkboxes

<flux:checkbox.all /> should only toggle when:
- It is clicked directly
- Or when all individual <flux:checkbox> items are manually selected/deselected

Non-checkbox components (such as <flux:switch>) inside the table should be ignored by the checkbox group and should not participate in selection logic.


### Please confirm (incomplete submissions will not be addressed)

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

[ganyicz]

Hi @EhsanGhafoori,

thanks for reporting!

I've submitted a PR with a fix.