primefaces/primereact

Calendar: Overlay arrow navigation through days is problematic

Open

#7928 opened on Apr 22, 2025

View on GitHub
 (2 comments) (0 reactions) (0 assignees)CSS (8,305 stars) (1,207 forks)batch import
Component: Accessibilitygood first issue

Description

Describe the bug

When I navigate through the days in calendar overlay, as soon as I am on the last day of the row and I press "ArrowRight", I am prompted to the next month instead of going to the next arrow.

Reproducer

No response

System Information

"primereact": "10.9.4"
"react": "19.1.0",=

Steps to reproduce the behavior

  1. Focus calendar input to open overlay
  2. Focus any day of the week
  3. Navigate through arrow keys all the way to the left / right
  4. Press the arrow key once again
  5. You are now on the previous / next month instead of previous / next row

Image

Image

Expected behavior

In this situation I expect to go to the next / previous row instead of month. This is the normal UX everyone expects, which is implemented in all the available datepickers out there for MUI, Aria, etc

Contributor guide

Tech stack
reacttypescript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic React knowledgeUnderstanding of keyboard events
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Examine the Calendar component's keyboard navigation logic, likely in the overlay panel. Focus on the onKeyDown handler for arrow keys. The issue is that pressing ArrowRight at the end of a row switches month instead of moving to next row. Look for logic that determines when to call navigateToNextMonth versus navigateToNextRow. The fix should check if the current day is at the last column of the grid and then move to the first day of the next row instead of next month. Also check for similar behavior for ArrowLeft. Review the test files for calendar navigation if available.