fix: Select/Combobox scroll conflicts (#1083)

huntabyte · Feb 1, 2025 · 9efd957 · 9efd957
1 parent accf52f
commit 9efd957
Show file tree

Hide file tree

Showing 11 changed files with 247 additions and 208 deletions.
diff --git a/.changeset/gorgeous-rice-draw.md b/.changeset/gorgeous-rice-draw.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix: Select/Combo scroll
diff --git a/packages/bits-ui/package.json b/packages/bits-ui/package.json
@@ -52,7 +52,7 @@
 		"@internationalized/date": "^3.5.6",
 		"esm-env": "^1.1.2",
 		"runed": "^0.23.2",
-		"svelte-toolbelt": "^0.7.0"
+		"svelte-toolbelt": "^0.7.1"
 	},
 	"peerDependencies": {
 		"svelte": "^5.11.0"

diff --git a/packages/bits-ui/src/lib/app.d.ts b/packages/bits-ui/src/lib/app.d.ts
@@ -15,4 +15,5 @@ declare global {
 		readonly map: SvelteMap<string, boolean>;
 		resetBodyStyle: () => void;
 	};
+	var bitsAnimationsDisabled: boolean;
 }
diff --git a/packages/bits-ui/src/lib/bits/select/components/select-scroll-down-button.svelte b/packages/bits-ui/src/lib/bits/select/components/select-scroll-down-button.svelte
@@ -13,22 +13,19 @@
 		...restProps
 	}: SelectScrollDownButtonProps = $props();
 
-	let mounted = $state(false);
-
-	const scrollDownButtonState = useSelectScrollDownButton({
+	const scrollButtonState = useSelectScrollDownButton({
 		id: box.with(() => id),
-		mounted: box.with(() => mounted),
 		ref: box.with(
 			() => ref,
 			(v) => (ref = v)
 		),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, scrollDownButtonState.props));
+	const mergedProps = $derived(mergeProps(restProps, scrollButtonState.props));
 </script>
 
-{#if scrollDownButtonState.canScrollDown}
-	<Mounted onMountedChange={(m) => (mounted = m)} />
+{#if scrollButtonState.canScrollDown}
+	<Mounted onMountedChange={(v) => (scrollButtonState.state.mounted = v)} />
 	{#if child}
 		{@render child({ props: restProps })}
 	{:else}

diff --git a/packages/bits-ui/src/lib/bits/select/components/select-scroll-up-button.svelte b/packages/bits-ui/src/lib/bits/select/components/select-scroll-up-button.svelte
@@ -13,22 +13,19 @@
 		...restProps
 	}: SelectScrollUpButtonProps = $props();
 
-	let mounted = $state(false);
-
-	const scrollDownButtonState = useSelectScrollUpButton({
+	const scrollButtonState = useSelectScrollUpButton({
 		id: box.with(() => id),
-		mounted: box.with(() => mounted),
 		ref: box.with(
 			() => ref,
 			(v) => (ref = v)
 		),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, scrollDownButtonState.props));
+	const mergedProps = $derived(mergeProps(restProps, scrollButtonState.props));
 </script>
 
-{#if scrollDownButtonState.canScrollUp}
-	<Mounted onMountedChange={(m) => (mounted = m)} />
+{#if scrollButtonState.canScrollUp}
+	<Mounted onMountedChange={(v) => (scrollButtonState.state.mounted = v)} />
 	{#if child}
 		{@render child({ props: restProps })}
 	{:else}