Help me get working a DropdownMenu.CheckboxGroup in forceMount-ed content

[dil-zgaal]

I'm trying to get the DropdownMenu.CheckboxGroup working with a forceMount-ed drop-down-menu content, but the value is not updated any more.

Something like this (of course the Content is a placed in custom component I just merged them for simpler example):

<script>
  import { DropdownMenu } from "bits-ui";

	let filters = $state([])
</script>

{JSON.stringify(filters)}

<DropdownMenu.Root>
	<DropdownMenu.Trigger>
		open dropdown
	</DropdownMenu.Trigger>

  <DropdownMenu.Content forceMount data-slot="dropdown-menu-content">
    {#snippet child({ open, props, wrapperProps })}
			{#if open}
				<div {...wrapperProps} >
					<div {...props}>
						<DropdownMenu.CheckboxGroup bind:value={filters}>
							{#each ["apple", "orange", "banana"] as fruit}
								<DropdownMenu.CheckboxItem
									value={fruit}
									onCheckedChange={(checked) => {
										console.log(fruit, checked)
									}}
									>
									{#snippet child({ checked, props})}
										<div {...props}>
											{fruit}
											{#if checked}✓{/if}								  
										</div>
									{/snippet}
								</DropdownMenu.CheckboxItem>
							{/each}
						</DropdownMenu.CheckboxGroup>
					</div>
				</div>
			{/if}
		{/snippet}
	</DropdownMenu.Content>  
</DropdownMenu.Root>

<DropdownMenu.Root>
	<DropdownMenu.Trigger>
		open dropdown
	</DropdownMenu.Trigger>

  <DropdownMenu.Content data-slot="dropdown-menu-content">
		<DropdownMenu.CheckboxGroup bind:value={filters}>
			{#each ["apple", "orange", "banana"] as fruit}
				<DropdownMenu.CheckboxItem
					value={fruit}
					onCheckedChange={(checked) => {
						console.log(fruit, checked)
					}}
					>
					{#snippet child({ checked, props})}
						<div {...props}>
							{fruit}
							{#if checked}✓{/if}								  
						</div>
					{/snippet}
				</DropdownMenu.CheckboxItem>
			{/each}
		</DropdownMenu.CheckboxGroup>
	</DropdownMenu.Content>  
</DropdownMenu.Root>
  	

Could you help me please ? (The forceMount is required for animation and some border, etc. styles)

[dil-zgaal]

Never mind it seems I've missed a bind:value from the CheckboxGroup