From 65ec1c7c1323a3b7db457eac9ecc5c064fbe115d Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Tue, 27 Oct 2026 11:32:36 +0100 Subject: [PATCH 1/3] fix focus when no date is selected and add test --- packages/lib/src/date-input/DateInput.test.tsx | 11 +++++++++++ packages/lib/src/date-input/DateUnitPicker.tsx | 2 +- 2 files changed, 12 insertions(+), 1 deletion(-) 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}`); From 24d3720a3024646e1e58ea3990cbd11e3afc77c9 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Tue, 27 Oct 2026 12:17:41 +0100 Subject: [PATCH 2/3] fix YearMonthPicker --- packages/lib/src/date-input/YearMonthPicker.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/lib/src/date-input/YearMonthPicker.tsx b/packages/lib/src/date-input/YearMonthPicker.tsx index 8c614e3bd..a85a016b8 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 dateToUse = selectedDate?.isValid() ? selectedDate : today; + const [selectedYear, setSelectedYear] = useState(dateToUse.get("year")); + const [selectedMonth, setSelectedMonth] = useState(dateToUse.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 = dateToUse.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 = dateToUse.set("month", month); const finalDate = selectedYear != null ? newDate.set("year", selectedYear) : newDate; setSelectedMonth(month); onYearMonthComplete(finalDate); From 208b04a757f50386a7e68d62d5e404958a3d03bf Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Tue, 27 Oct 2026 16:07:19 +0100 Subject: [PATCH 3/3] change const name --- packages/lib/src/date-input/YearMonthPicker.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/lib/src/date-input/YearMonthPicker.tsx b/packages/lib/src/date-input/YearMonthPicker.tsx index a85a016b8..dd0ed9524 100644 --- a/packages/lib/src/date-input/YearMonthPicker.tsx +++ b/packages/lib/src/date-input/YearMonthPicker.tsx @@ -12,23 +12,23 @@ const YearMonthPickersContainer = styled.div` `; export const YearMonthPicker = ({ isYearFirst, selectedDate, today, onYearMonthComplete }: YearMonthPickerProps) => { - const dateToUse = selectedDate?.isValid() ? selectedDate : today; - const [selectedYear, setSelectedYear] = useState(dateToUse.get("year")); - const [selectedMonth, setSelectedMonth] = useState(dateToUse.get("month")); + 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 = dateToUse.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 = dateToUse.set("month", month); + const newDate = defaultFocusedDate.set("month", month); const finalDate = selectedYear != null ? newDate.set("year", selectedYear) : newDate; setSelectedMonth(month); onYearMonthComplete(finalDate);