customInput typing doesn't work properly

[Konstiman]

Describe the bug

When I pass a custom input component into the customInput parameter, typing the date using the keyboard becomes buggy - for example it's not possible to rewrite or delete the date.

To Reproduce

I created the following CodeSandbox containing the minimal version of the problem:

https://codesandbox.io/s/react-datepicker-issue-wyunxm?file=/src/index.tsx

The green datepicker uses a native input - I'm passing the <input /> tag into the customInput.

The red datepicker uses a custom component - I'm passing the <CustomInput /> into the customInput.

function App() {
  const [startDate1, setDate1] = React.useState(new Date());
  const [startDate2, setDate2] = React.useState(new Date());

  const CustomInput = React.forwardRef((props: any, ref) => (
    <input {...props} ref={ref} type="text" className="dp-red" />
  ));

  return (
    <div className="App">
      <h1>Simple datepicker</h1>
      <div className="dp-container">
        <DatePicker
          selected={startDate1}
          onChange={setDate1}
          customInput={<input type="text" className="dp-green" />}
        />
      </div>
      <div className="dp-container">
        <DatePicker
          selected={startDate2}
          onChange={setDate2}
          customInput={<CustomInput />}
        />
      </div>
    </div>
  );
}

Expected behavior

The green datepicker behaves correctly when changing the value using the keyboard - it's possible to use backspace and type freely.

The red datepicker should have the same behavior, but it doesn't.

Desktop:

• OS: Win10
• Browser: Chrome
• Version 105.0.5195.127 (Official Build) (64-bit)

Additional context

Maybe I'm using the forwardRef incorrectly? I don't know, but I also tried passing the ref using the customInputRef parameter and it didn't work either.

Am I doing anything wrong or is this a bug?

[jiscsander]

I've come across the same issue. It seems like every change of input that can be converted to a date triggers the same action as onBlur usually seems to - i.e. if you enter "1" into the custom input box it will automatically convert that to 01/currentMonth/currentYear and same for other numbers.

[marten-cz]

There is this reported issue #2051 , but it didn't worked for me.

[henkkasoft]

I am using React-Bootstrap and had this problem when DatePicker was used inside Modal or Accordion/Table components. I was able to fix it using this #2051 (comment)

With typescript I had a problem with useRef type but was able to solve it with a bit ugly solution.

const CustomInput = forwardRef((props: FormControlProps, ref: React.Ref<HTMLDivElement>) => {
  return (
    <InputGroup className={classes.CustomInput} ref={ref}>
      <Form.Control {...props} />
      <IoCalendarNumberOutline className={classes.CalendarIcon} />
    </InputGroup>
  );
});

function MyDatePicker({ value, onDateChange }: MyDatePickerProps) {
  const refCustomInput = useRef() as React.MutableRefObject<HTMLDivElement>;
  return (
    <DatePicker
      selected={value}
      onChange={onDateChange}
      customInput={<CustomInput ref={refCustomInput} />}
    />
  );
}

By the way pressing the calendar icon IoCalendarNumberOutline is not activating the DatePicker yet in my solution.
If someone can tip me how to solve this it would be great.

[djwashburn]

I also had this problem and solved it using mjviljan's comment on 2051 here, and like @henkkasoft above I ran into an issue with the useRef type. I found a cleaner solution than the above for that problem here:

const refCustomInput = useRef<HTMLInputElement>(null);

Basically, you just have to parameterize useRef with the type of the element, and initialize the ref with null.

Hopefully this helps someone. I think the example for Custom Input should be changed accordingly, to prevent people from running into this issue in the future.

[aaronamm]

@djwashburn thank you so much for sharing, I agree with you that the example of a custom input should change to input type.