fix(date-picker): date-picker within a popover-container closes when tabbing

[mihai-albu-sage]

Modified the handleOnDayKeyDown handler inside the DatePicker to prevent interfering with the useFocusPortalContent hook.

Proposed behaviour

popover-after.mp4

Current behaviour

When using the keyboard navigation the handleOnDayKeyDown handler inside the DatePicker focuses the second input of the date range. useFocusPortalContent determines the last item is focused. On the next keyboard navigation event, the focus moves from the second date range input inside of the react day picker. Since , from the useFocusPortalContent perspective we just lost the focus on the last element, it will close the popover.

popover-before.mp4

Checklist

• Commits follow our style guide
• 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

Additional context

Testing instructions

[nuria1110]

suggestion (non-blocking): Even though this will probably require manual testing, we could add a playwright test to make sure the Tabbing order doesn't break in the future.

[mihai-albu-sage]

suggestion (non-blocking): Even though this will probably require manual testing, we could add a playwright test to make sure the Tabbing order doesn't break in the future.

Added a new playwright test to check the keyboard navigation for the DateRange when it is inside of a PopoverContainer