From 48f1193ff83cc9d53210efd5ea0b8321cda9c346 Mon Sep 17 00:00:00 2001
From: Damien Robson <damien.robson@sage.com>
Date: Tue, 21 Jan 2025 09:22:24 +0000
Subject: [PATCH] feat(date): fix focus loss when using navbar with keyboard

The Navbar of the internal date picker component has been memoized to ensure that it doesn't
rerender unless it absolutely needs to (which should be never as it's just two buttons; the month
name isn't part of the navbar, it's just styled that way)

fix #7158
---
 playwright/index.tsx                          |  5 +---
 .../date-picker/date-picker.component.tsx     |  8 +++---
 .../date-picker/date-picker.test.tsx          | 28 +++++++++++++++++++
 3 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/playwright/index.tsx b/playwright/index.tsx
index c3ddeef0ce..acc0c594c2 100644
--- a/playwright/index.tsx
+++ b/playwright/index.tsx
@@ -25,10 +25,7 @@ const mountedTheme = (theme: string) => {
 
 // Setup required providers on mounted component before running test. See https://playwright.dev/docs/test-components#hooks
 beforeMount<HooksConfig>(async ({ App, hooksConfig }) => {
-  const {
-    theme = "sage",
-    validationRedesignOptIn,
-  } = hooksConfig || {};
+  const { theme = "sage", validationRedesignOptIn } = hooksConfig || {};
   return (
     <CarbonProvider
       theme={mountedTheme(theme)}
diff --git a/src/components/date/__internal__/date-picker/date-picker.component.tsx b/src/components/date/__internal__/date-picker/date-picker.component.tsx
index 14a7890b08..cd5c6fd278 100644
--- a/src/components/date/__internal__/date-picker/date-picker.component.tsx
+++ b/src/components/date/__internal__/date-picker/date-picker.component.tsx
@@ -72,6 +72,8 @@ const popoverMiddleware = [
   }),
 ];
 
+const Nav = Navbar;
+
 export const DatePicker = ({
   inputElement,
   minDate,
@@ -250,16 +252,14 @@ export const DatePicker = ({
                 weekdaysShort,
               },
             }}
-            selected={focusedMonth}
+            selected={selectedDays}
             month={focusedMonth || /* istanbul ignore next */ new Date()}
             onDayClick={(d, _, e) => {
               const date = d as Date;
               handleDayClick(date, e);
             }}
             components={{
-              Nav: (props) => {
-                return <Navbar {...props} />;
-              },
+              Nav,
               Weekday: (props) => {
                 const fixedDays = {
                   Sunday: 0,
diff --git a/src/components/date/__internal__/date-picker/date-picker.test.tsx b/src/components/date/__internal__/date-picker/date-picker.test.tsx
index 7d4d234987..498c69ad31 100644
--- a/src/components/date/__internal__/date-picker/date-picker.test.tsx
+++ b/src/components/date/__internal__/date-picker/date-picker.test.tsx
@@ -454,3 +454,31 @@ test("should correctly translate the month caption for the given locale (zh-CN)"
   expect(monthCaption).toBeVisible();
   expect(monthCaption).toHaveTextContent("三月 2019");
 });
+
+test("navigation buttons should maintain focus between month changes when using the keyboard", async () => {
+  const user = userEvent.setup();
+  render(
+    <DatePickerWithInput
+      setOpen={() => {}}
+      open
+      selectedDays={new Date(2019, 3, 4)}
+    />,
+  );
+
+  const textbox = screen.getByRole("textbox");
+  const monthLabel = screen.getByText("April 2019");
+  const previousButton = screen.getByRole("button", { name: "Previous month" });
+  const nextButton = screen.getByRole("button", { name: "Next month" });
+
+  await user.click(textbox);
+  await user.tab();
+  expect(previousButton).toHaveFocus();
+  await user.keyboard("{enter}");
+  expect(monthLabel).toHaveTextContent("March 2019");
+  expect(previousButton).toHaveFocus();
+  await user.tab();
+  expect(nextButton).toHaveFocus();
+  await user.keyboard("{enter}");
+  expect(monthLabel).toHaveTextContent("April 2019");
+  expect(nextButton).toHaveFocus();
+});