React-datepicker: customInput component with input child cannot be typed in

[benuleau]

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

[VLaD0S]

@benuleau under the hood datepicker uses customInput = || other
Also, you don't need to pass down all the event handlers.
<DateInput customInput={(<input type="text")}>

[antiold]

@benuleau this works, I guess some other prop is required (like onKeyDown (?), to lazy to debug)
```js
const CustomInput = props =>
````

[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_

[benuleau]

@antiold @ivanosevitch thank you, you're correct. Passing the rest of the properties from DatePicker solves my issue. Link to a working version of the picker

[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.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.