fix(Select): improve scroll behavior and content positioning

Author: huntabyte

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

@@ -112,6 +112,7 @@ abstract class SelectBaseRootState {
 		if (!this.highlightedNode) return null;
 		return this.highlightedNode.getAttribute("data-label");
 	});
+	contentIsPositioned = $state(false);
 	isUsingKeyboard = false;
 	isCombobox = false;
 	domContext = new DOMContext(() => null);
@@ -143,27 +144,8 @@ abstract class SelectBaseRootState {
 	}
 
 	scrollHighlightedNodeIntoView(node: HTMLElement) {
-		const scrollContainer = this.viewportNode ?? this.contentNode;
-		if (!scrollContainer) return;
-
-		const scrollContainerRect = scrollContainer.getBoundingClientRect();
-		const nodeRect = node.getBoundingClientRect();
-
-		if (this.opts.scrollAlignment.current === "center") {
-			const scrollContainerCenter = scrollContainerRect.top + scrollContainerRect.height / 2;
-			const nodeCenter = nodeRect.top + nodeRect.height / 2;
-			scrollContainer.scrollTop += nodeCenter - scrollContainerCenter;
-			return;
-		}
-
-		if (nodeRect.top < scrollContainerRect.top) {
-			scrollContainer.scrollTop -= scrollContainerRect.top - nodeRect.top;
-			return;
-		}
-
-		if (nodeRect.bottom > scrollContainerRect.bottom) {
-			scrollContainer.scrollTop += nodeRect.bottom - scrollContainerRect.bottom;
-		}
+		if (!this.viewportNode || !this.contentIsPositioned) return;
+		node.scrollIntoView({ block: this.opts.scrollAlignment.current });
 	}
 
 	getCandidateNodes(): HTMLElement[] {
@@ -927,17 +909,24 @@ export class SelectContentState {
 
 		onDestroyEffect(() => {
 			this.root.contentNode = null;
+			this.root.contentIsPositioned = false;
 			this.isPositioned = false;
 		});
 
 		watch(
 			() => this.root.opts.open.current,
 			() => {
 				if (this.root.opts.open.current) return;
+				this.root.contentIsPositioned = false;
 				this.isPositioned = false;
 			}
 		);
 
+		watch([() => this.isPositioned, () => this.root.highlightedNode], () => {
+			if (!this.isPositioned || !this.root.highlightedNode) return;
+			this.root.scrollHighlightedNodeIntoView(this.root.highlightedNode);
+		});
+
 		this.onpointermove = this.onpointermove.bind(this);
 	}
 
@@ -1011,6 +1000,7 @@ export class SelectContentState {
 			// onPlaced is also called when the menu is closed, so we need to check if the menu
 			// is actually open to avoid setting positioning to true when the menu is closed
 			if (this.root.opts.open.current) {
+				this.root.contentIsPositioned = true;
 				this.isPositioned = true;
 			}
 		},