ui: fix group checkbox sticking checked after disable

Clicking a mixed-state group box let bits-ui optimistically flip
its internal checked flag; the derived checked prop did not change
across the transition (both mixed and off map to checked=false),
so Svelte never applied the settled value and the check icon stuck
while the count already read 0/7.

Pass the parent flag as checked and the mix as indeterminate, so
every group toggle changes checked; render the dash on top of a
checked box for the mixed state.

Assisted-by: pi
This commit is contained in:
Aleksander Grygier
2026-08-27 10:38:13 +02:00
committed by GitHub
parent cf39a070ad
commit 85acaa0626
3 changed files with 5 additions and 5 deletions
@@ -276,7 +276,7 @@
</span>
<Checkbox
checked={checkState.checked && !checkState.indeterminate}
checked={checkState.checked}
class="{ICON_CLASS_DEFAULT} shrink-0"
indeterminate={checkState.indeterminate}
onCheckedChange={() => toolsPanel.toggleGroupByKey(group.key)}
@@ -120,7 +120,7 @@
{#snippet child({ props })}
<Checkbox
{...props}
checked={checkState.checked && !checkState.indeterminate}
checked={checkState.checked}
class="mr-2 {ICON_CLASS_DEFAULT} shrink-0"
indeterminate={checkState.indeterminate}
onCheckedChange={() => toolsPanel.toggleGroupByKey(group.key)}
@@ -26,10 +26,10 @@
>
{#snippet children({ checked, indeterminate })}
<div class="text-current transition-none" data-slot="checkbox-indicator">
{#if checked}
<CheckIcon class="size-3.5" />
{:else if indeterminate}
{#if indeterminate}
<MinusIcon class="size-3.5" />
{:else if checked}
<CheckIcon class="size-3.5" />
{/if}
</div>
{/snippet}