react-tailwindcss-datepicker icon indicating copy to clipboard operation
react-tailwindcss-datepicker copied to clipboard

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

Open mschipperheyn opened this issue 2 years ago • 0 comments

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}
        />
    )
  },
)

mschipperheyn avatar Nov 21 '23 12:11 mschipperheyn