Skip to content

CDateRangePicker doesn't trigger onChange callbacks when date parsing fails, breaking form validation #441

@DerekChan65535

Description

@DerekChan65535

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

  1. Form Validation Broken: Parent components cannot detect when user enters invalid dates
  2. Inconsistent State: Component holds last valid date while input shows invalid text
  3. Clearing Issues: Parent components aren't notified when fields are cleared
  4. 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

  1. Create a CDateRangePicker with validation
  2. Type invalid date format (e.g., "abc" or incomplete date)
  3. Observe that onChange callback is never triggered
  4. 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.


Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions