fix: add explicit text-foreground to SelectTrigger, SelectValue, and SelectItem
Some checks failed
Auto Tag / auto-tag (push) Successful in 4s
Test / rust-fmt-check (push) Successful in 1m11s
Test / rust-clippy (push) Successful in 7m12s
Test / rust-tests (push) Successful in 8m9s
Test / frontend-typecheck (push) Successful in 1m22s
Test / frontend-tests (push) Successful in 1m13s
Release / build-macos-arm64 (push) Successful in 2m57s
Release / build-windows-amd64 (push) Has been cancelled
Release / build-linux-arm64 (push) Has been cancelled
Release / build-linux-amd64 (push) Has been cancelled

Color inheritance was not propagating on macOS WebKit causing dropdown
text to be invisible. Items only appeared when hovered due to
hover:text-accent-foreground being the only color set.
This commit is contained in:
Shaun Arman 2026-03-30 17:19:34 -05:00
parent 790f9520bd
commit 366c564834

View File

@ -205,7 +205,7 @@ export function SelectTrigger({
<button
type="button"
className={cn(
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
onClick={() => ctx.setOpen(!ctx.open)}
@ -221,7 +221,7 @@ export function SelectTrigger({
export function SelectValue({ placeholder }: { placeholder?: string }) {
const ctx = React.useContext(SelectContext)!;
return <span className={ctx.value ? "" : "text-muted-foreground"}>{ctx.value || placeholder}</span>;
return <span className={ctx.value ? "text-foreground" : "text-muted-foreground"}>{ctx.value || placeholder}</span>;
}
export function SelectContent({
@ -256,7 +256,7 @@ export function SelectItem({
return (
<div
className={cn(
"relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground",
"relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm text-foreground outline-none hover:bg-accent hover:text-accent-foreground",
ctx.value === value && "bg-accent text-accent-foreground"
)}
onMouseDown={(e) => {