fix: Combobox/Select item registration (#919)

Author: huntabyte

.changeset/green-drinks-sell.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix: ensure highlighted item is reset when items mount/unmount

packages/bits-ui/src/lib/bits/select/components/select-item.svelte

@@ -4,6 +4,7 @@
 	import type { SelectItemProps } from "../types.js";
 	import { useId } from "$lib/internal/use-id.js";
 	import { noop } from "$lib/internal/noop.js";
+	import Mounted from "$lib/bits/utilities/mounted.svelte";
 
 	let {
 		id = useId(),
@@ -41,3 +42,9 @@
 		{@render children?.(itemState.snippetProps)}
 	</div>
 {/if}
+
+<Mounted
+	onMountedChange={(m) => {
+		itemState.mounted = m;
+	}}
+/>

packages/bits-ui/src/lib/bits/select/select.svelte.ts

@@ -187,7 +187,7 @@ class SelectSingleRootState extends SelectBaseRootState {
 		$effect(() => {
 			if (!this.open.current) return;
 			afterTick(() => {
-				this.#setInitialHighlightedNode();
+				this.setInitialHighlightedNode();
 			});
 		});
 	}
@@ -201,8 +201,8 @@ class SelectSingleRootState extends SelectBaseRootState {
 		this.inputValue = itemLabel;
 	};
 
-	#setInitialHighlightedNode = () => {
-		if (this.highlightedNode) return;
+	setInitialHighlightedNode = () => {
+		if (this.highlightedNode && document.contains(this.highlightedNode)) return;
 		if (this.value.current !== "") {
 			const node = this.getNodeByValue(this.value.current);
 			if (node) {
@@ -235,7 +235,7 @@ class SelectMultipleRootState extends SelectBaseRootState {
 			if (!this.open.current) return;
 			afterTick(() => {
 				if (!this.highlightedNode) {
-					this.#setInitialHighlightedNode();
+					this.setInitialHighlightedNode();
 				}
 			});
 		});
@@ -254,7 +254,7 @@ class SelectMultipleRootState extends SelectBaseRootState {
 		this.inputValue = itemLabel;
 	};
 
-	#setInitialHighlightedNode = () => {
+	setInitialHighlightedNode = () => {
 		if (this.highlightedNode) return;
 		if (this.value.current.length && this.value.current[0] !== "") {
 			const node = this.getNodeByValue(this.value.current[0]!);
@@ -815,6 +815,7 @@ class SelectItemState {
 	isHighlighted = $derived.by(() => this.root.highlightedValue === this.value.current);
 	prevHighlighted = new Previous(() => this.isHighlighted);
 	textId = $state("");
+	mounted = $state(false);
 
 	constructor(props: SelectItemStateProps, root: SelectRootState) {
 		this.root = root;
@@ -838,6 +839,11 @@ class SelectItemState {
 			id: this.#id,
 			ref: this.#ref,
 		});
+
+		$effect(() => {
+			if (!this.mounted) return;
+			this.root.setInitialHighlightedNode();
+		});
 	}
 
 	snippetProps = $derived.by(() => ({

pnpm-lock.yaml

@@ -40,6 +40,7 @@
 		"rehype-slug": "^6.0.0",
 		"remark-gfm": "^4.0.0",
 		"remove-markdown": "^0.5.5",
+		"runed": "^0.15.2",
 		"shiki": "^1.1.1",
 		"svelte": "^5.1.0",
 		"svelte-check": "4.0.3",