-
-
Notifications
You must be signed in to change notification settings - Fork 272
Description
Description
The CDateRangePicker
component has a critical issue where onStartDateChange
and onEndDateChange
callbacks are not triggered when date parsing fails. This breaks form validation workflows and prevents proper integration with form libraries like react-hook-form
.
Current Behavior
In the handleOnChange
function (lines 446-460), when getLocalDateFromString
returns undefined
for invalid input, the condition date instanceof Date && date.getTime()
fails and no callbacks are triggered:
const handleOnChange = useDebouncedCallback((value: string, input: string) => {
const date = inputDateParse
? inputDateParse(value)
: getLocalDateFromString(value, locale, timepicker)
if (date instanceof Date && date.getTime()) {
// Only calls callbacks on successful parsing
setCalendarDate(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 trigger onStartDateChange
/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 the handleOnChange
function to trigger callbacks with null when parsing fails:
const handleOnChange = useDebouncedCallback((value: string, input: string) => {
const date = inputDateParse
? inputDateParse(value)
: getLocalDateFromString(value, locale, timepicker)
if (date instanceof Date && 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 null
if (input === 'start') {
setStartDate(null)
onStartDateChange?.(null)
} else {
setEndDate(null)
onEndDateChange?.(null)
}
}
}, inputOnChangeDelay)
Impact
This change would align CDateRangePicker
with standard form input behavior and enable proper validation workflows without breaking existing functionality.