Kostiantyn
Top achievements
Rank 1
Rank 1
Kostiantyn
asked on 01 Dec 2023, 04:47 PM
Hello everyone
I need to implement a DatePicker with a section with prefilled dates for the User.
Here is my implementation - https://stackblitz.com/edit/react-t6vo2n
I have a problem - when you click on the prefilled date the DatePicker doesn’t take the date. If you click very quickly the DatePicker can take the date. I suppose that it appears because the popup starts unmounting. I suppose the unmounting cause is that the calendar lost focus when the User clicked any area in the prefilled dates section.
Can I somehow prevent this?
Hi, Kostiantyn,
I opened the stacbklitz and was able to reproduce the odd behavior in question. This looks like an issue with the Calendar itself, however, I will need more time to research and make sure.
I will get back to you once I have more information.
Regards,
Filip
As promised I am getting back to you. After a further, more thorough investigation, it seems that the issue is because a function is being passed to the `calendar` prop, I was able to make the component work properly by passing just the component to `calendar` and making the `onPrefillDate` function available using React.Context:
https://stackblitz.com/edit/react-t6vo2n-k7q9vw?file=app%2FDatePicker.tsx
I hope this helps but please let me know in case further assistance is required.
Regards,
Filip
Hi, Filip.
Thank you for your example. I still need help - the calendar in your example works weirdly. The calendar doesn't close up when you pick the date for the first time and I can’t get the difference with my example. If you pick the date from the original calendar and then pick the prefilled date it won’t be picked (if your click wasn’t quick) and the pop-up will be closed. So I think there is the same problem when the callback doesn’t work because of the pop-up unmounting.
Hi, Kostiantyn,
I tested the example I sent earlier, and yes the same undesired behavior was observed when selecting a date initially and then clicking the prefilled date, I apologize for overlooking it in my previous reply. This seems like an issue with losing focus due to the unmounting indeed and I have logged it as such in our repo, where its status can be tracked and monitored:
https://github.com/telerik/kendo-react/issues
I tried various other custom implementations to work around it to no avail. Apologies for any inconvenience that this might have caused you. As a small token of appreciation for bringing this issue to our attention, I have granted you some Telerik points.
Regards,
Filip