DatePicker Calendar Displays Below Window When DatePicker Is Placed in the Window Wrapper

[Alice]

Hi,

I'm not sure if this is best placed in the wrapper forum or the general forum, but my problem is that when I place a Kendo React DatePicker inside a Kendo Window React Wrapper, the calendar is displayed below the window when the user tries to change the date.

Example: https://react-emp7kp.stackblitz.io/

Code: https://stackblitz.com/edit/react-emp7kp

If I use the DatePicker wrapper instead, it works fine.

Thanks,

Alice

[Alice]

Sorry, the code URL should be https://stackblitz.com/edit/react-emp7kp?file=app%2Fmain.js

[Stefan]

Hello, Alice,

The issue occurs due to the difference in the z-index value of the Window and the Popup of the DatePicker.

The following CSS will fix it:

.k-window {
  z-index: 99 !important;
}

or

.k-animation-container {
  z-index: 10005 !important;
}

I noticed another issue when the icon in the DatePicker is clicked that will not close it. This is due to the Window getting the focus.

We are working on the native Window component that is already in the test stage, and we can recommend waiting for it if it is possible.

Regards,
Stefan
Progress Telerik