React Carbon - Controlled DatePicker type='range', first input shows both values

[agmcleod]

What package(s) are you using?

• carbon-components-react

Summary

I'm working on setting up a date range for a table filter. I seem to get the input data okay, but when I update the form state to have the array of the two dates, and that passes back to the DatePicker component, the first DatePickerInput shows both values.

Relevant information

Our component for integrating formik with the date picker

export const FormikDatePicker = connectFormik(
  ({
    formik,
    labelText,
    tooltipKey,
    field,
    datePickerType,
    rangeLabels,
    ...otherInputProps
  }) => {
    const isRange = datePickerType === 'range'
    const handleChange = (selectedDates, dateStr) => {
      const { setFieldTouched, setFieldValue } = formik
      setFieldTouched(field.name, true)

      if (isRange) {
        setFieldValue(field.name, selectedDates)
      } else {
        const date = moment(`${dateStr}T00:00:00`)
        setFieldValue(field.name, date.toISOString())
      }
    }

    let label = ''
    if (isRange) {
      label = rangeLabels[0]
    }

    return (
      <>
        {datePickerType === 'single' ? (
          <FieldLabel
            labelText={labelText}
            name={field.name}
            tooltipKey={tooltipKey}
          />
        ) : null}
        <DatePicker
          onChange={(selectedDates, dateStr) => {
            handleChange(selectedDates, dateStr)
          }}
          value={field.value}
          id={`datePicker-${field.name}`}
          datePickerType={datePickerType}
          dateFormat='Y-m-d'
        >
          <DatePickerInput
            id={field.name}
            placeholder='yyyy-mm-dd'
            pattern={DATE_PATTERN}
            labelText={label}
            {...otherInputProps}
          />
          {isRange ? (
            <DatePickerInput
              id={`${field.name}-end`}
              placeholder='yyyy-mm-dd'
              pattern={DATE_PATTERN}
              labelText={rangeLabels[1]}
              {...otherInputProps}
            />
          ) : null}
        </DatePicker>
      </>
    )
  }
)

[asudoh]

Hi 👋 we used to have a similar issue, but it's been fixed. That said, what version of Carbon are you using? If you think you are using latest Carbon, would you want to create a reduced case based on https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox? Thanks!

[agmcleod]

@asudoh sure, here you go: https://codesandbox.io/s/codesandbox-oliyt. Using the latest on my own code base as well: 7.7.4