-
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 typing doesn't work properly #3762
Comments
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. |
There is this reported issue #2051 , but it didn't worked for me. |
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.
By the way pressing the calendar icon IoCalendarNumberOutline is not activating the DatePicker yet in my solution. |
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:
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. |
@djwashburn thank you so much for sharing, I agree with you that the example of a custom input should change to |
Guys update the docs so that customInput example contains |
✅ I solved the issue after incorporating multiple comments from above.
|
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
.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:
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?
The text was updated successfully, but these errors were encountered: