From 65ec1c7c1323a3b7db457eac9ecc5c064fbe115d Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Tue, 27 Oct 2026 11:32:36 +0100 Subject: [PATCH 1/6] 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/6] 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/6] 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); From 10c66d841403f4aeac68d33f4ef8a842a107bdac Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Thu, 29 Oct 2026 09:40:15 +0100 Subject: [PATCH 4/6] add visual test --- .../lib/src/date-input/DateInput.stories.tsx | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/packages/lib/src/date-input/DateInput.stories.tsx b/packages/lib/src/date-input/DateInput.stories.tsx index c5a18ec71..6a73d6c18 100644 --- a/packages/lib/src/date-input/DateInput.stories.tsx +++ b/packages/lib/src/date-input/DateInput.stories.tsx @@ -302,6 +302,13 @@ const YearMonthPickerZhCn = () => ( ); +const YearMonthPickerWithoutSelection = () => ( + + + <DxcDateInput label="Date input" /> + </ExampleContainer> +); + type Story = StoryObj<typeof DxcDateInput>; export const Chromatic: Story = { @@ -379,3 +386,17 @@ export const YearMonthPickerWithLocale: Story = { } }, }; + +export const YearMonthPickerWithoutSelectedDate: Story = { + render: YearMonthPickerWithoutSelection, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const calendarAction = await canvas.findByRole("combobox"); + await userEvent.click(calendarAction); + const dialog = await screen.findByRole("dialog"); + const yearMonthTrigger = within(dialog).getAllByRole("button")[1]; + if (yearMonthTrigger != null) { + await userEvent.click(yearMonthTrigger); + } + }, +}; From 84de50d21aa82211306f5727c6fad2d84e3aaba7 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso <pfelguerosogalguera@gmail.com> Date: Thu, 29 Oct 2026 16:44:34 +0100 Subject: [PATCH 5/6] Fix story --- .../lib/src/date-input/DateInput.stories.tsx | 30 ++++++------------- 1 file changed, 9 insertions(+), 21 deletions(-) diff --git a/packages/lib/src/date-input/DateInput.stories.tsx b/packages/lib/src/date-input/DateInput.stories.tsx index 6a73d6c18..3c1a73252 100644 --- a/packages/lib/src/date-input/DateInput.stories.tsx +++ b/packages/lib/src/date-input/DateInput.stories.tsx @@ -275,6 +275,15 @@ const DatePickerToday = () => { items={yearItems} /> </ExampleContainer> + <ExampleContainer> + <Title title="Isolated date unit picker without a selected date" theme="light" level={4} /> + <DateUnitPicker + selectedDate={null} + onDateUnitSelect={() => {}} + today={dayjs("2026-04-03", "YYYY-MM-DD")} + items={yearItems} + /> + </ExampleContainer> </> ); }; @@ -302,13 +311,6 @@ const YearMonthPickerZhCn = () => ( </ExampleContainer> ); -const YearMonthPickerWithoutSelection = () => ( - <ExampleContainer expanded> - <Title title="Year/Month picker without a selected date" theme="light" level={4} /> - <DxcDateInput label="Date input" /> - </ExampleContainer> -); - type Story = StoryObj<typeof DxcDateInput>; export const Chromatic: Story = { @@ -386,17 +388,3 @@ export const YearMonthPickerWithLocale: Story = { } }, }; - -export const YearMonthPickerWithoutSelectedDate: Story = { - render: YearMonthPickerWithoutSelection, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - const calendarAction = await canvas.findByRole("combobox"); - await userEvent.click(calendarAction); - const dialog = await screen.findByRole("dialog"); - const yearMonthTrigger = within(dialog).getAllByRole("button")[1]; - if (yearMonthTrigger != null) { - await userEvent.click(yearMonthTrigger); - } - }, -}; From d11e195c8fbbcde80086a7eb51cd080b89000fcf Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso <pfelguerosogalguera@gmail.com> Date: Thu, 29 Oct 2026 17:01:17 +0100 Subject: [PATCH 6/6] use YearMonthPicler with an invalid date --- packages/lib/src/date-input/DateInput.stories.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/lib/src/date-input/DateInput.stories.tsx b/packages/lib/src/date-input/DateInput.stories.tsx index 3c1a73252..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", @@ -276,12 +277,12 @@ const DatePickerToday = () => { /> </ExampleContainer> <ExampleContainer> - <Title title="Isolated date unit picker without a selected date" theme="light" level={4} /> - <DateUnitPicker - selectedDate={null} - onDateUnitSelect={() => {}} + <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")} - items={yearItems} /> </ExampleContainer> </>