Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork272
Description
Description
TheCDateRangePicker
component has a critical issue whereonStartDateChange
andonEndDateChange
callbacks arenot triggered when date parsing fails. This breaks form validation workflows and prevents proper integration with form libraries likereact-hook-form
.
Current Behavior
In thehandleOnChange
function (lines 446-460), whengetLocalDateFromString
returnsundefined
for invalid input, the conditiondate instanceof Date && date.getTime()
fails andno callbacks are triggered:
consthandleOnChange=useDebouncedCallback((value:string,input:string)=>{constdate=inputDateParse ?inputDateParse(value) :getLocalDateFromString(value,locale,timepicker)if(dateinstanceofDate&&date.getTime()){// Only calls callbacks on successful parsingsetCalendarDate(date)if(input==='start'){setStartDate(date)onStartDateChange?.(date)}else{setEndDate(date)onEndDateChange?.(date)}}// BUG: No callbacks triggered when parsing fails},inputOnChangeDelay)
Problems This Causes
- Form Validation Broken: Parent components cannot detect when user enters invalid dates
- Inconsistent State: Component holds last valid date while input shows invalid text
- Clearing Issues: Parent components aren't notified when fields are cleared
- Integration Issues: Breaks compatibility with form validation libraries
Expected Behavior
When date parsing fails or input is cleared, the component should still triggeronStartDateChange
/onEndDateChange
with null values, consistent with how standard form inputs behave.
Reproduction Steps
- Create a
CDateRangePicker
with validation - Type invalid date format (e.g.,
"abc"
or incomplete date) - Observe that
onChange
callback is never triggered - Form validation cannot detect the invalid state
Proposed Fix
Modify thehandleOnChange
function totrigger callbacks with null when parsing fails:
consthandleOnChange=useDebouncedCallback((value:string,input:string)=>{constdate=inputDateParse ?inputDateParse(value) :getLocalDateFromString(value,locale,timepicker)if(dateinstanceofDate&&date.getTime()){setCalendarDate(date)if(input==='start'){setStartDate(date)onStartDateChange?.(date)}else{setEndDate(date)onEndDateChange?.(date)}}else{// NEW: Handle parsing failures by calling callbacks with nullif(input==='start'){setStartDate(null)onStartDateChange?.(null)}else{setEndDate(null)onEndDateChange?.(null)}}},inputOnChangeDelay)
Impact
This change wouldalignCDateRangePicker
with standard form input behavior and enable proper validation workflows without breaking existing functionality.