onesine / react-tailwindcss-datepicker

Modern date range picker component for React using Tailwind 3 and dayjs. Alternative to Litepie Datepicker.
https://react-tailwindcss-datepicker.vercel.app/
MIT License
552 stars 169 forks source link

Editing value manually doesn't update widget if done at the start #219

Open mschipperheyn opened 1 year ago

mschipperheyn commented 1 year ago

I see a weird behavior that updating the content of the input field manually normally does update the state of the widget and the date it displays. But not if the first thing you do is edit that value manually (and not selecting it in the widget). In that scenario, it doesn't update the value.

I see this behavior also on the demo pages. Where I see also something I don't see locally: that the even after first selecting a date in the widget, you can update it manually with it impacting the displayed date in the widget.

export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
  (
    {
      name,
      value,
      onChange,
    },
    ref,
  ) => {
    const val = value as string
    const [date, setDate] = React.useState<{
      startDate: DateType
      endDate: DateType
    }>(
      !val?.length
        ? { startDate: new Date(), endDate: '' }
        : { startDate: new Date(val), endDate: '' },
    )

    const handleChange = React.useCallback(
      (value: DateValueType) => {
        const val = value?.startDate as string | undefined
        onChange!(val || '')
        setDate(value)
      },
      [onChange],
    )
    return (
        <Datepicker
          inputName={name}
          value={date}
          useRange={false}
          asSingle
          onChange={handleChange}
        />
    )
  },
)