From 1ca40fad5fe5d8538c32725752d7bb3cd6d645d6 Mon Sep 17 00:00:00 2001 From: farhan Date: Mon, 6 Jul 2026 13:42:29 +0500 Subject: [PATCH] fix(datepicker): navigate to the clicked decade in decades view Clicking a decade in the decades view computed the new view date as an offset from the selected date's year (addYears(viewDate, year - selectedDate.getFullYear())), which lands in the wrong decade whenever the view date differs from the selected date, and does nothing at all when no date is selected. Use the already-computed date within the clicked decade directly, matching how the years view handles selection. Adds a regression test covering navigation between decades and a changeset for a patch release. Fixes #1516 --- .changeset/eighty-hoops-shake.md | 7 +++++ .../components/Datepicker/Datepicker.test.tsx | 27 +++++++++++++++++++ .../components/Datepicker/Views/Decades.tsx | 2 +- 3 files changed, 35 insertions(+), 1 deletion(-) create mode 100644 .changeset/eighty-hoops-shake.md diff --git a/.changeset/eighty-hoops-shake.md b/.changeset/eighty-hoops-shake.md new file mode 100644 index 0000000000..e93ed1e122 --- /dev/null +++ b/.changeset/eighty-hoops-shake.md @@ -0,0 +1,7 @@ +--- +"flowbite-react": patch +--- + +Fix `Datepicker` decades view navigating to the wrong decade + +Clicking a decade computed the new view date relative to the selected date instead of the clicked decade, so the years view often displayed a different decade than the one clicked (and did nothing when no date was selected). The clicked decade is now used directly, matching the behavior of the years view. diff --git a/packages/ui/src/components/Datepicker/Datepicker.test.tsx b/packages/ui/src/components/Datepicker/Datepicker.test.tsx index 0028a2da56..d29adb36bb 100644 --- a/packages/ui/src/components/Datepicker/Datepicker.test.tsx +++ b/packages/ui/src/components/Datepicker/Datepicker.test.tsx @@ -93,6 +93,33 @@ describe("Components / Datepicker", () => { expect(titleButton.textContent).toBe("1990 - 2100"); }); + it("should show the years of the clicked decade when the view date differs from the selected date", async () => { + const testDate = new Date(2024, 6, 20); + render(); + + const textBox = screen.getByRole("textbox"); + await userEvent.click(textBox); + + const titleButton = screen.getByText("July 2024"); + await userEvent.click(titleButton); + await userEvent.click(titleButton); + await userEvent.click(titleButton); + expect(titleButton.textContent).toBe("1990 - 2100"); + + // navigate the view (but not the selection) to a different decade + await userEvent.click(screen.getByText("1990")); + expect(titleButton.textContent).toBe("1990 - 2001"); + await userEvent.click(screen.getByText("1994")); + + // go back up to the decades view and pick another decade + await userEvent.click(titleButton); + await userEvent.click(titleButton); + expect(titleButton.textContent).toBe("1890 - 2000"); + await userEvent.click(screen.getByText("2000")); + + expect(titleButton.textContent).toBe("2000 - 2011"); + }); + it("should allow selecting earlier decades when setting max date", async () => { const testDate = new Date(2024, 6, 20); render(); diff --git a/packages/ui/src/components/Datepicker/Views/Decades.tsx b/packages/ui/src/components/Datepicker/Views/Decades.tsx index f815469035..d4e85d6b14 100644 --- a/packages/ui/src/components/Datepicker/Views/Decades.tsx +++ b/packages/ui/src/components/Datepicker/Views/Decades.tsx @@ -57,7 +57,7 @@ export function DatepickerViewsDecades() { onClick={() => { if (isDisabled) return; - selectedDate && setViewDate(addYears(viewDate, year - selectedDate.getFullYear())); + setViewDate(newDate); setView(Views.Years); }} >