fix(ui): associate the Reset Budget label with its select control

antd Form.Item injects an id into its child so the rendered label can point
at the control. BudgetDurationDropdown destructured its props without
forwarding that id, so the label resolved to nothing and assistive tech
announced the field unnamed. Forward it to SelectTrigger.
This commit is contained in:
Yuneng Jiang 2026-08-15 01:41:13 -07:00
parent d70cc14981
commit 7cdd97329d
No known key found for this signature in database

View file

@ -12,6 +12,7 @@ const DURATION_LABELS: Record<string, string> = {
};
interface BudgetDurationDropdownProps {
id?: string;
value?: string | null;
onChange?: (value: string | undefined) => void;
className?: string;
@ -21,6 +22,7 @@ interface BudgetDurationDropdownProps {
}
const BudgetDurationDropdown: React.FC<BudgetDurationDropdownProps> = ({
id,
value,
onChange,
className = "",
@ -34,7 +36,7 @@ const BudgetDurationDropdown: React.FC<BudgetDurationDropdownProps> = ({
value={value || null}
onValueChange={(next: string | null) => onChange?.(next ?? undefined)}
>
<SelectTrigger className={`w-full ${className}`} style={style}>
<SelectTrigger id={id} className={`w-full ${className}`} style={style}>
<SelectValue placeholder={placeholder} />
</SelectTrigger>
<SelectContent>