-
Notifications
You must be signed in to change notification settings - Fork 2.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
customInput lost the focus after entering one or max 2 characters #2051
Comments
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? |
I had this problem in my code and after some investigation it looks like it works like this because of unique combination of
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 |
The bug seems to have to do with "autoFocus". I found a work-around that supports date guessing!
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}
/>
);
}; |
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. |
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:
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...) |
@mjviljan Thank you so much for the solution. |
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) => (
);
return (
<DatePicker
selected={startDate}
onChange={date => setStartDate(date)}
customInput={}
/>
);
};
Expected behavior
Input box should allow to enter complete date value using keyboard number keys
The text was updated successfully, but these errors were encountered: