diff --git a/packages/lib/src/date-input/DateInput.test.tsx b/packages/lib/src/date-input/DateInput.test.tsx index ac214b160..bc5acf423 100644 --- a/packages/lib/src/date-input/DateInput.test.tsx +++ b/packages/lib/src/date-input/DateInput.test.tsx @@ -100,6 +100,17 @@ describe("DateInput component tests", () => { ).toBeTruthy(); expect(getByText(d.format("MMMM YYYY"))).toBeTruthy(); }); + test("Year month picker focuses the current month and year when no date is selected", async () => { + const user = userEvent.setup(); + const { getByRole } = render(); + const currentDate = dayjs(); + + await user.click(getByRole("combobox")); + await user.click(getByRole("button", { name: currentDate.format("MMMM YYYY") })); + + expect(getByRole("option", { name: currentDate.format("MMMM") })).toHaveAttribute("tabindex", "0"); + expect(getByRole("option", { name: currentDate.format("YYYY") })).toHaveAttribute("tabindex", "0"); + }); test("Calendar renders with correct date: value prop", async () => { const user = userEvent.setup(); const { getByText, getByRole, getAllByText } = render(); diff --git a/packages/lib/src/date-input/DateUnitPicker.tsx b/packages/lib/src/date-input/DateUnitPicker.tsx index 35d20e0e5..4e8d55895 100644 --- a/packages/lib/src/date-input/DateUnitPicker.tsx +++ b/packages/lib/src/date-input/DateUnitPicker.tsx @@ -75,7 +75,7 @@ const DateUnitPicker = ({ const ariaLabel = `${unit.charAt(0).toUpperCase() + unit.slice(1)} Picker`; const id = useId(); - const [itemToFocus, setItemToFocus] = useState(selectedDate ? selectedDate.get(unit) : dayjs().get(unit)); + const [itemToFocus, setItemToFocus] = useState(selectedDate?.isValid() ? selectedDate.get(unit) : currentValue); useEffect(() => { const itemToFocusEl = document.getElementById(`${id}_${unit}_${itemToFocus}`); diff --git a/packages/lib/src/date-input/YearMonthPicker.tsx b/packages/lib/src/date-input/YearMonthPicker.tsx index 8c614e3bd..dd0ed9524 100644 --- a/packages/lib/src/date-input/YearMonthPicker.tsx +++ b/packages/lib/src/date-input/YearMonthPicker.tsx @@ -12,22 +12,23 @@ const YearMonthPickersContainer = styled.div` `; export const YearMonthPicker = ({ isYearFirst, selectedDate, today, onYearMonthComplete }: YearMonthPickerProps) => { - const [selectedYear, setSelectedYear] = useState(selectedDate?.get("year") || null); - const [selectedMonth, setSelectedMonth] = useState(selectedDate?.get("month") || null); + const defaultFocusedDate = selectedDate?.isValid() ? selectedDate : today; + const [selectedYear, setSelectedYear] = useState(defaultFocusedDate.get("year")); + const [selectedMonth, setSelectedMonth] = useState(defaultFocusedDate.get("month")); const languageContext = use(HalstackLanguageContext); const yearItems = getYearPickerItems(); const monthItems = getMonthPickerItems(languageContext.labels.calendar.months); const handleOnYearSelect = (year: number) => { - const newDate = selectedDate.set("year", year); + const newDate = defaultFocusedDate.set("year", year); const finalDate = selectedMonth != null ? newDate.set("month", selectedMonth) : newDate; setSelectedYear(year); onYearMonthComplete(finalDate); }; const handleOnMonthSelect = (month: number) => { - const newDate = selectedDate.set("month", month); + const newDate = defaultFocusedDate.set("month", month); const finalDate = selectedYear != null ? newDate.set("year", selectedYear) : newDate; setSelectedMonth(month); onYearMonthComplete(finalDate);