Immediate Close on mobile devices

[Christian]

I have the problem that the responsive panel closes again immediately after opening on some mobile devices.

This can be reproduced with Chrome browser on the desktop: Small window widths in desktop mode work nicely, but when I enable Galaxy or iPad emulation I get an immediate close event.

This scenario can also be reproduced with the snippets from the documentation Dojo: https://dojo.telerik.com/Iqozu 

 

Futhermore with a longclick it can be openend, but then it does not close anymore.

 

Then I have tried to reproduce this issue in Windows Edge with iPad/Nexus emulation and it does not happen here.

Next step was to test another browser on my Galaxy and it did not happen there either.

 

Therefore in any way it has to be something with chrome browser and mobiles... hmmm

 

Many thanks for helping out here!

[Stefan]

Hello Christian,

Thank you for the information and the example.

After additional investigation, its seems that this is due to some changes in Chrome on how the events are prevented:

"[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive"

https://www.chromestatus.com/features/5093566007214080

As this is Chrome specific behaviour since version 56, I will log it in our GitHub repository for additional investigation:

https://github.com/telerik/kendo-ui-core/issues/3556

Some workarounds can be used on the close event of the ResponsivePanel to prevent the closing. Please have in mind that additional custom logic has to be added to determine when the menu can be closed:

https://dojo.telerik.com/AYEbe

Additionally, I updated your Telerik points for bringing this to our attention.

Regards,
Stefan
Progress Telerik

[Christian]

If someone has this problem too, here's the fix:

No need to change anything on the open/close events. Just add an event handler for touching:

            $(".k-rpanel-toggle").on("touchend", function(e) {
                    e.preventDefault();
            });

[gregory]

thank-you Christian, this solution works on mobile, but does not work on iPad devices. I'll try to research and come up with a solution.

[Alex Hajigeorgieva]

Hi, Gregory,

I have just tested the workaround provided by my colleague on a Chrome app version 72.0.3626.101 which was released 2 weeks ago and the Kendo UI responsive panel remains open on an iPad running iOS 12.1.4.

Can you let us know more details about the environment you are testing with so we can assist in finding an alternative if need be?

Here is the Dojo that I used to test with:

https://dojo.telerik.com/oNEfijOk

Look forward to hearing back from you.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[gregory]

Hi Alex,

That is good to know! I am using Chrome Version 72.0.3626.119 (Official Build) (64-bit) and it is not working with device emulation with iPad or iPad pro. It is not working in emulation on my site (http://gregoryalexander.com/blogCfc/client/), or even with the dojo that you kindly made. Everything else works with the preventDefault argument though. If you tested using a real device, then I hope that the emulation mode in Chrome is at fault here. 

Thanks!

 

Gregory

[Alex Hajigeorgieva]

Hello, Gregory,

Yes, I tested on a real device as the emulation is not 100% accurate when it comes to testing events. 

I also tried your site on an iPhone in the Chrome App and the Kendo UI Responsive Panel stays open there, available to users to subscribe to the blog.

Since you are working on responsiveness, I am pleased to let you know that we are about to release a better version of our mobile grid as well in our next major release, so you can give it a try and give us your feedback.

We would greatly appreciate it.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[gregory]

Thank-you for verifying that it works and the emulation is bad, and will do Alex! Shoot me an email and I will play around with the new panel when it comes out.