[patch] Fix YearMonthPicker focus

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}
         />
       </ExampleContainer>
+      <ExampleContainer>
+        <Title title="YearMonth picker without a selected date" theme="light" level={4} />
+        <YearMonthPicker
+          isYearFirst={true}
+          selectedDate={dayjs("23", "YYYY-MM-DD")}
+          onYearMonthComplete={() => {}}
+          today={dayjs("2026-04-03", "YYYY-MM-DD")}
+        />
+      </ExampleContainer>
     </>
   );
 };

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" />);

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}`);

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);