Repository: Sage/carbon (ts)

Issue:
[Date Input & Date Range] - Focus is lost when user navigates using the keyboard to previous or next month
### Description

When using the keyboard in the date picker to navigate to the previous or next month, focus is lost. I expect focus to remain on the previous or next button until I reach the month I require.

https://github.com/user-attachments/assets/b800cfc4-6c45-4a3c-b246-9aa86f67a761

### Reproduction

https://carbon.sage.com/v/146.4.3/index.html?path=/story/date-input--default

### Steps to reproduce

Open default Date Input or Date Range story in Storybook.
Open the date picker.
Tab to the previous or next month button and press the Enter key or Spacebar to select it. Focus is lost.

### JIRA ticket numbers (Sage only)

FE-7047

### Suggested solution

This seems to have regressed in version 144.13.0. Resolve the issue so that focus remains on the previous or next buttons after they are selected.

### Carbon version

146.4.3

### Design tokens version

_No response_

### Relevant browsers

Safari, Chrome, Firefox, Microsoft Edge

### Relevant OSs

MacOS

### Additional context

_No response_

### Confidentiality

- [x] I confirm there is no confidential or commercially sensitive information included.

Pull request:
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

### Proposed behaviour

Prevent the  month navigation buttons from losing focus when activated via keyboard

### Current behaviour

The buttons of the navigation bar in the Date Picker lose focus when activated using keyboard controls

### Checklist

- [x] Commits follow our style guide
- [x] Related issues linked in commit messages if required
- [ ] Screenshots are included in the PR if useful
- [ ] All themes are supported if required
- [ ] Unit tests added or updated if required
- [ ] Playwright automation tests added or updated if required
- [ ] Storybook added or updated if required
- [ ] Translations added or updated (including creating or amending translation keys table in storybook) if required
- [ ] Typescript `d.ts` file added or updated if required
- [ ] Related docs have been updated if required

#### QA

- [ ] Tested in provided StackBlitz sandbox/Storybook
- [ ] Add new Playwright test coverage if required
- [ ] Carbon implementation matches Design System/designs
- [ ] UI Tests GitHub check reviewed if required

### Testing instructions

Use the Storybook examples to ensure that the buttons don't lose focus when navigating between months using the keyboard

Patch:
diff --git a/playwright/index.tsx b/playwright/index.tsx
index c3ddeef0c..acc0c594c 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 b76ee7899..6c799ff42 100644
--- a/src/components/date/__internal__/date-picker/date-picker.component.tsx
+++ b/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,
diff --git a/src/components/date/date.pw.tsx b/src/components/date/date.pw.tsx
index cc714d9c9..1d732f323 100644
--- a/src/components/date/date.pw.tsx
+++ b/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();
   });


Test patch:
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 7d4d23498..498c69ad3 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();
+});