primefaces / primefaces/primereact

Calendar: onBlur triggers when clicking a day, but onChange is not triggered

Open
#6,667 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Resolution: Workaround
Dominant language
CSS
Stars
8.3k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

Describe the bug

When the onBlur property is defined in the Calendar component, clicking on a day for the first time triggers the onBlur function, but the date is not selected.

If you click a second time on the date, the date will be set. This behavior is problematic because the onBlur function might display an error message, and when the user clicks the first time, the date is not selected as expected but the error message is shown.

Reproducer

https://stackblitz.com/edit/f5hvge-767xd1?file=src%2FApp.jsx

PrimeReact version

^10.6.3

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Chrome

Steps to reproduce the behavior

1. Create a Calendar component and define the onBlur function.
2. Click on the calendar, then click once on a day box.
3. The date is not selected, and the onBlur function is executed without setting the date.

Expected behavior

When clicking the first time on the day box, the date should be set.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the StackBlitz reproducer and the Calendar component's onBlur and date-selection handling. Reproduce the first-click behavior in Chrome, then trace how onBlur and onChange are triggered when a day is clicked. Done means the first day click sets the date and triggers the expected change behavior without the premature blur error.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.