customInput lost the focus after entering one or max 2 characters

[gawadesantosh14]

When a custom input passed to datepicker using customInput attribute then the input tag looses its focus after entering one or two characters. Need to focus in the input multiple times in order to enter the complete date

Steps to reproduce the behavior:
() => {
const [startDate, setStartDate] = useState(new Date());
const ExampleCustomInput = (props) => (

<input {...props}/>

);
return (
<DatePicker
selected={startDate}
onChange={date => setStartDate(date)}
customInput={}
/>
);
};

1. Click in the input box
2. Try entering the date values using number keys
3. Input looses the focus

Expected behavior
Input box should allow to enter complete date value using keyboard number keys

[sridhar-v9]

Hi,

Can you try making following prop to true

strictParsing={true}

i tried its working

[chadlavi-casebook]

Hi,

Can you try making following prop to true

strictParsing={true}

i tried its working

This "fixes" the issue in as much as the user is able to type dates, but it removes functionality (for example, date guessing doesn't work, it just waits until you've completed date to do anything).

Does anyone know of a way to get the same functionality available with the default input, but using a custom one?

[Koka]

I had this problem in my code and after some investigation it looks like it works like this because of unique combination of React.cloneElement and ref in date picker code for custom inputs which leads to all sorts of unexpected behavior.
So looks like for now there are only two viable alternatives:

1. Use custom input for non-input elements only (like a button in custom input example)
2. Or don't use custom input if you need manual input to work properly - if you need custom input styling (like me) you could use combination of CSS and className / wrapperClassName props to style default input as you wish

Hope this helps the next person who comes here with this problem. By using way 2 from above I was able to match my needs without using strictParsing

[koga73]

The bug seems to have to do with "autoFocus". I found a work-around that supports date guessing!

• Create a state variable hasFocus
• onFocus set to true
• onBlur set to false
• add attribute autoFocus={hasFocus} to customInput

Full example:

import React, {useRef, useState, forwardRef} from "react";

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

export default ({onFocus, onBlur, ...props}) => {
	//Ref needed for custom input
	const refCustomInput = useRef();

	//State hooks
	const [stateHasFocus, setStateHasFocus] = useState(false); //Initial value

	//Custom input
	const CustomInput = forwardRef((props, ref) => {
		const {autoFocus, ...remaining} = props;

		return <input type="text" ref={ref} autoFocus={stateHasFocus} {...remaining} />;
	});

	return (
		<DatePicker
			customInput={<CustomInput ref={refCustomInput} />}
			onFocus={evt => {
				setStateHasFocus(true);

				//Notify parent
				if (onFocus) {
					onFocus.call(this, evt);
				}
			}}
			onBlur={evt => {
				setStateHasFocus(false);

				//Notify parent
				if (onBlur) {
					onBlur.call(this, evt);
				}
			}}
			{...props}
		/>
	);
};

[stale]

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.

[mjviljan]

Sorry, I know the issue is already closed but I thought this could help someone else, still.

I ran into this same problem and went with koga73's solution above which worked nicely for me also. (Thanks!)

However, based on a colleague's review comment I moved the custom input component outside of the exported date picker component and that seemed to remove the problem altogether. So, using the above solution as a basis, this is what I tried:

import React, { useRef, forwardRef } from 'react';

import ReactDatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

//Custom input
const CustomInput = forwardRef((props, ref) => {
    return <input type="text" ref={ref} {...props} />;
});

export default ({ onFocus, onBlur, ...props }) => {
    //Ref needed for custom input
    const refCustomInput = useRef();

    return <ReactDatePicker customInput={<CustomInput ref={refCustomInput} />} {...props} />;
};

It seemed like I had no problems with the focus "escaping" outside of the input component any more.

I know the "custom input" example on the site has the custom input component inside of the functional component but I'm not sure if that's a requirement. (I believe creating components there can actually cause problems with the state in more complex components...)

[geyuqiu]

https://codesandbox.io/s/react-datepicker-custominput-sample-forked-pc39wb?file=/src/App.tsx

[aaronamm]

@mjviljan Thank you so much for the solution.