Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

damienrobson-sage
Copy link
Contributor

@damienrobson-sage damienrobson-sage commented Jan 21, 2025

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

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

  • 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

Testing instructions

Use the Storybook examples to ensure that the buttons don't lose focus when navigating between months using the 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging this pull request may close these issues.

[Date Input & Date Range] - Focus is lost when user navigates using the keyboard to previous or next month
1 participant