diff --git a/packages/lib/src/date-input/DateInput.stories.tsx b/packages/lib/src/date-input/DateInput.stories.tsx index c5a18ec71..bb71a95fc 100644 --- a/packages/lib/src/date-input/DateInput.stories.tsx +++ b/packages/lib/src/date-input/DateInput.stories.tsx @@ -12,6 +12,7 @@ import DateUnitPicker from "./DateUnitPicker"; import { fireEvent, screen, userEvent, within } from "storybook/test"; import { HalstackProvider } from "../HalstackContext"; import { getMonthPickerItems, getYearPickerItems } from "./utils"; +import { YearMonthPicker } from "./YearMonthPicker"; export default { title: "Date Input", @@ -275,6 +276,15 @@ const DatePickerToday = () => { items={yearItems} /> + + + <YearMonthPicker + isYearFirst={true} + selectedDate={dayjs("23", "YYYY-MM-DD")} + onYearMonthComplete={() => {}} + today={dayjs("2026-04-03", "YYYY-MM-DD")} + /> + </ExampleContainer> </> ); }; 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(<DxcDateInput />); + 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(<DxcDateInput value="20-10-2019" />); 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<number | null>(selectedDate?.get("year") || null); - const [selectedMonth, setSelectedMonth] = useState<number | null>(selectedDate?.get("month") || null); + const defaultFocusedDate = selectedDate?.isValid() ? selectedDate : today; + const [selectedYear, setSelectedYear] = useState<number | null>(defaultFocusedDate.get("year")); + const [selectedMonth, setSelectedMonth] = useState<number | null>(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);