customInput component with input child cannot be typed in

When creating a date picker with a custom input component, typing into the input field auto-formats to the incorrect date. For example, if the following date is in the input field: 01/01/2019, backspacing twice will automatically change the date to 01/01/2020. Backspacing 3 more times changes the date to 01/01/2002.

This is my code that is experiencing the issue:

const MyForm = () => (
  <DateInput />
);

const DateInput = () => {
  const [test, setTest] = useState(new Date());
  return (
    <DatePicker selected={test} onChange={date => setTest(date)} customInput={<CustomInput />
  );
}

const CustomInput = ({value, onClick, onChange}) => (
  <input value={value} onClick={onClick} onChange={onChange} />
);

Oddly enough, when using the standard date picker (without the custom input), everything works as expected.

Below is a gif of what happens when backspacing in the date picker with a custom input component

[L5eoneill]

Wow. When I tried this (onFocus) in custom input, the focus seemed to flicker back and forth from input to calendar at a crazy rate. Completely not working.

[ivanosevitch]

@antiold @benuleau you actually have to additionally pass down onFocus to the CustomInput to avoid this issue. The following code doesn’t reproduce the bug:

const DateInput = () => {
  const [test, setTest] = useState(new Date());
  return (
    <DatePicker selected={test} onChange={date => setTest(date)} customInput={<CustomInput />
  );
}

const CustomInput = ({value, onFocus, onChange}) => (
  <input value={value} onFocus={onFocus} onChange={onChange} />
);

This is not intuitive though, it ought to be somewhere in the documentation.

Using react-datepicker 2.10.1