Fixing Focus Management in PrimeReact Calendar (Open Source Contribution)

Open-source contributions don’t always mean adding big features. Sometimes, the most impactful changes are small UX fixes that improve how thousands of users interact with a component every day.

This post walks through a usability issue I fixed in the Calendar component of PrimeReact, and how a minimal, targeted change improved user interaction without breaking accessibility.

Background

PrimeReact is a popular React UI component library used by 50k+ projects. Its Calendar component supports different selection modes:

• single
• range
• multiple

Each mode has slightly different interaction expectations, especially around keyboard focus and accessibility.

The Problem

1. In single selection mode, the following behavior occurred:
2. User clicks the input → calendar opens
3. User selects a date
4. Calendar closes ✔️
5. Input field is immediately auto-focused ❌

Also Read: Youtube PIP Automation Extension

Because the input regained focus programmatically, clicking it again did not reopen the calendar. From a user’s perspective, the component felt broken.

This issue was reported and tracked in the PrimeReact repository.

Why This Matters

1. This wasn’t just a cosmetic issue:
2. It blocked normal mouse interaction
3. It created confusion for users

It behaved differently than expected for a single-selection date picker

At the same time, focus restoration is important for accessibility, especially in range and multiple selection modes. So the solution had to be careful — not just “remove focus handling”.

Root Cause

While tracing the code path after date selection, I found that the following function was being called unconditionally:

reFocusInputField();

This made sense for:

• range selection
• multiple selection

…but not for single selection, where the calendar overlay closes immediately.

The Fix

Instead of removing the logic entirely, I made it context-aware by checking the selection mode:

- reFocusInputField();
+ if (props.selectionMode !== 'single') {
+     reFocusInputField();
+ }

Result
Selection Mode Behavior After Fix
Single Calendar closes, no forced refocus, input clickable again
Range Refocus preserved
Multiple Refocus preserved

The fix:

• Solved the reported issue
• Preserved keyboard accessibility
• Avoided regressions
• Passed CI checks

Was reviewed and merged by PrimeReact maintainers

What I Learned

• UX bugs often live in “working” code
• Accessibility and usability need to be balanced, not traded off
• Maintainers value small, well-scoped fixes
• Explaining why a change is needed is as important as the change itself

Closing Thoughts

This contribution reinforced that meaningful open-source work doesn’t have to be large or complex. A few lines of carefully considered code can improve the experience of thousands of users.

If you’re looking to contribute to open source, fixing small usability issues is a great place to start.

Follow me on:

• Github
• Linkedin