Fix scroll bounds for long select dropdowns (#4798)

Co-authored-by: Xvvln <180168103+Xvvln@users.noreply.github.com>
This commit is contained in:
ayxwi
2026-07-01 11:57:17 +08:00
committed by GitHub
parent 8f484c54ce
commit ab3e628bad
2 changed files with 30 additions and 1 deletions
+1 -1
View File
@@ -37,7 +37,7 @@ const SelectContent = React.forwardRef<
<SelectPrimitive.Content
ref={ref}
className={cn(
"relative z-[100] min-w-[8rem] overflow-hidden rounded-md border border-border-default bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
"relative z-[100] max-h-[min(24rem,var(--radix-select-content-available-height))] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-border-default bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className,
)}
position={position}
@@ -0,0 +1,29 @@
import fs from "node:fs";
import path from "node:path";
import { describe, expect, it } from "vitest";
const SELECT_TSX = path.resolve(
__dirname,
"..",
"..",
"src",
"components",
"ui",
"select.tsx",
);
describe("SelectContent scroll bounds", () => {
const source = fs.readFileSync(SELECT_TSX, "utf8");
it("limits popper content to the available viewport height", () => {
expect(source).toContain("--radix-select-content-available-height");
expect(source).toContain(
"max-h-[min(24rem,var(--radix-select-content-available-height))]",
);
});
it("allows long option lists to scroll vertically", () => {
expect(source).toContain("overflow-y-auto");
expect(source).toContain("overflow-x-hidden");
});
});