fix: restore birth date dropdown interaction

This commit is contained in:
Jesse_Chen
2026-07-19 11:26:02 +08:00
parent cd0555f6e0
commit 3df5490ea2
2 changed files with 13 additions and 4 deletions
@@ -1,9 +1,10 @@
"use client";
import { format } from "date-fns";
import { zhCN } from "date-fns/locale";
import { zhCN as dateFnsZhCN } from "date-fns/locale";
import { CalendarIcon } from "lucide-react";
import { useId, useState } from "react";
import { zhCN } from "react-day-picker/locale";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
@@ -42,10 +43,10 @@ export function BirthDatePicker({ value, disabled, onChange }: BirthDatePickerPr
<span id={valueId}>
{selected === undefined
? "选择出生日期"
: format(selected, "PPP", { locale: zhCN })}
: format(selected, "PPP", { locale: dateFnsZhCN })}
</span>
</PopoverTrigger>
<PopoverContent align="start" className="w-auto p-0">
<PopoverContent align="start" className="w-auto p-0" aria-label="选择出生日期">
<Calendar
key={value || "empty"}
mode="single"
@@ -54,7 +55,6 @@ export function BirthDatePicker({ value, disabled, onChange }: BirthDatePickerPr
selected={selected}
defaultMonth={selected ?? today}
captionLayout="dropdown"
navLayout="after"
startMonth={new Date(1900, 0)}
endMonth={today}
reverseYears
@@ -24,3 +24,12 @@ test("replaces the native birth date input with the shadcn date picker", () => {
assert.match(picker, /startMonth=\{new Date\(1900, 0\)\}/)
assert.match(picker, /reverseYears/)
})
test("keeps the shadcn date-of-birth dropdown navigation order", () => {
// Given the shadcn Date of Birth composition
const picker = readFileSync(pickerUrl, "utf8")
// When dropdown captions are enabled
// Then the picker must not move the full-width nav after the caption selects
assert.doesNotMatch(picker, /navLayout="after"/)
})