feat(date): fix focus loss when using navbar with keyboard

The Navbar of the date picker component no longer re-renders when the rest of the component
updates

fix #7158

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

src/components/date/__internal__/date-picker/date-picker.component.tsx

@@ -76,6 +76,8 @@ const popoverMiddleware = [
   }),
 ];
 
+const Nav = Navbar;
+
 export const DatePicker = ({
   inputElement,
   minDate,
@@ -259,16 +261,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,

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();
+});

src/components/date/date.pw.tsx

@@ -501,6 +501,7 @@ test.describe("Functionality tests", () => {
 
     await datePicker.press("Escape");
 
+    await dateInput.waitFor();
     await expect(dateInput).toBeFocused();
     await expect(datePicker).toBeHidden();
   });