fix(Select): restore initial highlight in unpadded Select.Viewport

.changeset/fair-lamps-share.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix(Select): restore initial highlight in unpadded Select.Viewport

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

@@ -166,10 +166,10 @@ abstract class SelectBaseRootState {
 				const nodeRect = node.getBoundingClientRect();
 
 				const isNodeFullyVisible =
-					nodeRect.right < viewportRect.right &&
-					nodeRect.left > viewportRect.left &&
-					nodeRect.bottom < viewportRect.bottom &&
-					nodeRect.top > viewportRect.top;
+					nodeRect.right <= viewportRect.right &&
+					nodeRect.left >= viewportRect.left &&
+					nodeRect.bottom <= viewportRect.bottom &&
+					nodeRect.top >= viewportRect.top;
 
 				return isNodeFullyVisible;
 			});

tests/src/tests/select/select-viewport-test.svelte

@@ -0,0 +1,41 @@
+<script lang="ts" module>
+	import { Select, type SelectSingleRootProps, type WithoutChildren } from "bits-ui";
+	import { generateTestId } from "../helpers/select";
+
+	export type Item = {
+		value: string;
+		label: string;
+		disabled?: boolean;
+	};
+
+	export type SelectViewportHighlightTestProps = WithoutChildren<SelectSingleRootProps> & {
+		items: Item[];
+	};
+</script>
+
+<script lang="ts">
+	import "../../app.css";
+
+	let {
+		items,
+		value = "",
+		open = false,
+		...restProps
+	}: SelectViewportHighlightTestProps = $props();
+</script>
+
+<Select.Root bind:value bind:open {...restProps} type="single">
+	<Select.Trigger data-testid="trigger">Open Listbox</Select.Trigger>
+	<Select.Portal>
+		<Select.Content data-testid="content">
+			<Select.Viewport data-testid="viewport">
+				{#each items as { value, label, disabled } (value)}
+					{@const testId = generateTestId(value)}
+					<Select.Item {disabled} {value} {label} data-testid={testId}>
+						{label}
+					</Select.Item>
+				{/each}
+			</Select.Viewport>
+		</Select.Content>
+	</Select.Portal>
+</Select.Root>

tests/src/tests/select/select.browser.test.ts

@@ -9,6 +9,7 @@ import type { SelectMultipleTestProps } from "./select-multi-test.svelte";
 import SelectMultiTest from "./select-multi-test.svelte";
 import type { Item, SelectSingleTestProps } from "./select-test.svelte";
 import SelectTest from "./select-test.svelte";
+import SelectViewportTest from "./select-viewport-test.svelte";
 import { expectExists, expectNotExists } from "../browser-utils";
 import { page, userEvent } from "@vitest/browser/context";
 
@@ -561,6 +562,17 @@ describe("select - single", () => {
 
 		await expectNotExists(page.getByTestId("content"));
 	});
+
+	it("should highlight the first item when Select.Viewport has no padding", async () => {
+		const t = setupSingle({}, testItems, SelectViewportTest);
+
+		await expectNotExists(t.getContent());
+		await t.trigger.click();
+		await expectExists(t.getContent());
+
+		await expectHighlighted(page.getByTestId("empty"));
+		await expectNotHighlighted(page.getByTestId("1"));
+	});
 });
 
 ////////////////////////////////////