CoreUI PRO for React v5.22.0

Wednesday, September 17, 2025

We are pleased to announceCoreUI PRO for React v5.22.0 — a comprehensive release that introduces enhanced time picker functionality with improved keyboard navigation, advanced accessibility features for dropdown components, and significant bug fixes for better user experience.

Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.

How to Upgrade

To update your project toCoreUI PRO for React v5.22.0, follow these steps:

Open yourpackage.json.
Update the following dependencies:
- @coreui/react-pro to5.22.0
- @coreui/coreui-pro to5.20.0
- @coreui/react to5.9.0
Save the file.
Run your package manager:
- npm:npm install
- yarn:yarn install

🚀 What’s New

✨ New Features

CTimePicker

Arrow Key Navigation: Added support for arrow keys when selecting time parts
- Navigate between hours, minutes, seconds, and meridiem using arrow keys
- Intuitive keyboard navigation for better user experience
- Enhanced accessibility for keyboard-only users
- Seamless integration with existing time picker functionality

// Enhanced keyboard navigation<CTimePicker//Arrowkeysnowworkfortimepartselection//Up/Downarrowsincrement/decrementvalues//Left/Rightarrowsmovebetweentimeparts/>

Advanced Accessibility Features

Configurable ARIA Labels: Added comprehensive aria-label options for time picker
- ariaSelectHoursLabel - Custom label for hours selection
- ariaSelectMinutesLabel - Custom label for minutes selection
- ariaSelectSecondsLabel - Custom label for seconds selection
- ariaSelectMeridiemLabel - Custom label for AM/PM selection
- Enhanced screen reader support with proper ARIA roles and attributes
- Added listbox, option, aria-selected, and aria-label attributes
- Improved keyboard navigation with Home/End key support

<CTimePickerariaSelectHoursLabel="Select hours"ariaSelectMinutesLabel="Select minutes"ariaSelectSecondsLabel="Select seconds"ariaSelectMeridiemLabel="Select AM or PM"/>

CDropdown Enhanced Features

Reference Prop: Addedreference prop for custom positioning targets
- Allows dropdown positioning relative to custom elements
- Enhanced flexibility for complex layouts
- Better integration with dynamic content
Split Button Accessibility: AddedsplitLabel prop to CDropdownToggle
- Customizable screen reader text for split buttons
- Improved accessibility for dropdown button combinations
- Better ARIA support for complex dropdown scenarios

<CDropdown><CDropdownTogglesplitsplitLabel="Toggle dropdown options">Button</CDropdownToggle></CDropdown><CDropdownreference={customElement}><CDropdownMenu>{/* Positioned relative to customElement */}</CDropdownMenu></CDropdown>

🛠 Component Improvements

CTimePicker

Meridiem Handling Fix: Corrected AM/PM switching logic to prevent hour conversion errors
- Fixed 12h/24h format conversion issues
- Added bounds checking to prevent invalid hour values (0-23 range)
- Prevented double conversion errors when switching meridiem multiple times
- Ensured accurate time representation during AM/PM toggling

CDropdown

Scrollbar Click Fix: Resolved issue where clicking on scrollbars closed the dropdown menu
Focus Trap Implementation: Added focus trap functionality when used with portal
Performance Optimizations: Improved performance with useMemo for context and proper cleanup on unmount

Date Picker Components

Indicator Fix: Corrected disabled condition for date and time picker indicators
- FixedCDatePicker andCDateRangePicker indicator behavior
- Properly handles disabled state for picker indicators
- Consistent behavior across all date/time picker variants

CCalendar

Navigation Button Fix: Added proper button type to prevent unintended form submission
- Navigation buttons now havetype="button" to prevent form submission
- Better integration within form contexts
- Improved user experience in form-heavy applications

🛠 Code Quality Improvements

Documentation Updates: Updated roadmap links and comprehensive component documentation
Performance Enhancements: Optimized component rendering and memory usage
TypeScript Support: Enhanced type definitions for new props and accessibility features

📦 Dependency Updates

This release includes important dependency updates for enhanced performance, security, and compatibility:

Core Dependencies

Updated@coreui/coreui-pro from^5.19.0 to^5.20.0
Updated@coreui/react from^5.8.0 to^5.9.0

Development Tools

Updated@docsearch/css from^3.9.0 to^4.0.1
Updated@docsearch/react from^3.9.0 to^4.0.1
Updated@types/react from^19.1.12 to^19.1.13
Updated@typescript-eslint/parser from^8.42.0 to^8.44.0
Updatedeslint from^9.34.0 to^9.35.0
Updatedeslint-plugin-unicorn from^60.0.0 to^61.0.2
Updatedglobals from^16.3.0 to^16.4.0
Updatedlerna from^8.2.3 to^8.2.4
Updatedrollup from^4.50.0 to^4.50.2
Updatedsass from^1.91.0 to^1.92.1
Updatedts-jest from^29.4.1 to^29.4.2
Updatedtypescript-eslint from^8.42.0 to^8.44.0

🎯 Enhanced User Experience

Keyboard Navigation Improvements

The enhanced keyboard navigation provides:

Arrow Key Support: Navigate time parts with arrow keys in time picker
Home/End Keys: Jump to beginning/end of time ranges
Tab Navigation: Improved focus management between components
Screen Reader Support: Better ARIA announcements and navigation cues

Accessibility Enhancements

Enhanced accessibility features include:

Configurable ARIA Labels: Custom labels for all time picker components
Focus Trap: Proper focus management in dropdown portals
WCAG 2.1 Compliance: Enhanced keyboard navigation and screen reader support
Split Button Accessibility: Improved accessibility for complex dropdown scenarios

Bug Fixes and Stability

Key stability improvements:

Meridiem Conversion: Fixed AM/PM switching errors in time picker
Dropdown Interaction: Resolved scrollbar click issues
Form Integration: Prevented unintended form submission from calendar navigation
Indicator States: Corrected disabled state handling for picker indicators

💡 Migration Notes

New Props

The following new props are available:

// Time Picker with custom ARIA labels<CTimePickerariaSelectHoursLabel="Select hours"ariaSelectMinutesLabel="Select minutes"ariaSelectSecondsLabel="Select seconds"ariaSelectMeridiemLabel="Select AM or PM"//Arrowkeynavigationautomaticallyenabled/>// Dropdown with custom positioning<CDropdownreference={customElement}><CDropdownMenu>Content</CDropdownMenu></CDropdown>// Split button with custom accessibility label<CDropdownTogglesplitsplitLabel="Open additional options">PrimaryAction</CDropdownToggle>

No Breaking Changes

All changes are backward compatible. Existing implementations will continue to work without modifications while benefiting from:

Enhanced keyboard navigation in time pickers
Improved accessibility features
Better dropdown interaction handling
Fixed meridiem conversion logic

📖 Technical Details

Arrow Key Navigation Implementation

The arrow key support includes:

Up/Down arrows increment/decrement time values
Left/Right arrows move between time parts (hours → minutes → seconds → meridiem)
Proper value wrapping (24 hours, 60 minutes/seconds)
Integration with existing validation and formatting

Focus Trap Enhancement

The dropdown focus trap provides:

Automatic focus containment within dropdown portals
Proper focus restoration when closing dropdowns
Escape key handling for accessibility
Integration with existing keyboard navigation

Performance Optimizations

Performance improvements include:

Optimized context usage with useMemo
Proper cleanup on component unmount
Reduced re-renders in dropdown components
Memory-efficient event handling

Upgrade to CoreUI PRO for React v5.22.0 today to provide your users with enhanced keyboard navigation, improved accessibility, and more stable dropdown interactions. This release demonstrates our continued commitment to delivering high-quality, accessible UI components.