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