KendoReact DatePicker custom calendar no focus on open

1 Answer 473 Views
DatePicker
Andrei
Top achievements
Rank 1
Iron
Iron
Iron
Andrei asked on 23 Dec 2021, 10:12 AM

When default KendoReact DatePicker is opened field gains autofocus on open

due to this when you click somewhere else on the page calendar loses focus and automatically closes, however when i use custom calendar props


DatePicker no longer gets focused when it is opened and due to that loses this autoclosing functionality

is there any way to keep this autoclosing functionallity while using custom calendar component?

1 Answer, 1 is accepted

Sort by
1
Accepted
Kiril
Telerik team
answered on 23 Dec 2021, 10:23 AM

Hi Andrei,

There is an internal property which we're passing for most custom KendoReact components in order to obtain their `ref` and make focusing possible.

I've just noticed that in our documentation we're no spreading the properties we receive for the custom calendar, which leaves out the above mentioned internal property. The correct syntax is:

const CustomCalendar = (props) => {
  return (
    <MultiViewCalendar
      {...props}
      views={1}
    />
  );
};

I've modified the demo in stackblitz to correctly customize the Calendar, in order for the autofocus to work. Please find it bellow:
https://stackblitz.com/edit/react-smkcjx?file=app/customCalendar.jsx

I do apologize for any inconvenience this might have caused and we will be quick to update it in our docs.

Regards,
Kiril
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
DatePicker
Asked by
Andrei
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Kiril
Telerik team
Share this question
or