kendo datetimepicker is displaying behind dialog

[Jerry]

I am using the kendo-ui(2021.2.511) datetimepicker control in my Vuejs 2.x application.

The datetimepicker controls works when used on a page.

But when I use the datetimepicker in a v-dialog, and click the datetimepicker, the control displays behind the dialog for a moment then closes.

Has anyone seen this behavior? Is there a setting or work around to make the datetimepicker work correctly when used in a v-dialog?

 

[Petar]

Hi Jerry,

I've just tested the reported behavior in this StackBlitz example that uses the Vuetify v-dialog as it is in your scenario. I am unable to reproduce the issue that you reported. Can you check the linked sample project and let me know if you can replicate the issue with the DateTimePicker's popup in it? 

If the issue is replicable in the linked example, can you share the steps for its reproduction? 

If the issue is not replicable, can you edit the sample project in a way it can be reproduced? Send me the edited project together with reproduction steps and I will check what could be triggerign the issue.

Last but not least, what I would suggest is to check and use our Window or Dialog components that have Vue Native and Vue Wrapper versions. These components are similar to the Dialog provided by Vuetify but their compatibility with the other Kendo UI for Vue components is tested. What I want to say here is that if you use our Dialog or Window components, you should not have any issues similar to the reported one.

Regards,
Petar
Progress Telerik

[Jerry]

Hello, I tried modifying your StackBlitz example but wasn't able to get my control to display. I must be missing a dependency.

This is the control that we are using <datetimepicker/> : https://www.telerik.com/kendo-vue-ui/components/dateinputs/datetimepicker/

It's different from the <kendo-datetimepicker/> in your example. But the StackBlitz example you gave is basically what we are trying to do.

Can you make this work correctly in the <v-dialog/> in your example? <datetimepicker/>

[Petar]

Hi Jerry. 

Check this StackBlitz example. It uses the Native DateTimePicker component in  Vuejs 2.x context. 

To make the component's popup appear as expected, I've added the following CSS. Check the example and let me know if it helps you implement what you need.

.k-animation-container.k-animation-container-relative.k-datetime-container {

    z-index: 100000;

}

[Venkat]

Hi Petar,
Changing the z-index helps to bring the datetimepicker front and works fine. Its running into issue when 2 datetimepickers are used. The second datetime picker popup and hides immediately.

Please take a look at this StackBlitz example, where I have modified the earlier example with 2 controls
https://stackblitz.com/edit/b69i2m-p9oof2?file=index.html

[Petar]

Hi Venkat,

Here is a StackBlitz example demonstrating how the targeted functionality can be implemented.

То achieve the demonstrated behavior, the retain-focus property of the Vuetify Dialog should be set to false.