This is a migrated thread and some comments may be shown as answers.

Immediate Close on mobile devices

7 Answers 57 Views
ResponsivePanel
This is a migrated thread and some comments may be shown as answers.
Christian
Top achievements
Rank 1
Christian asked on 01 Sep 2017, 11:24 AM

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!

7 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 05 Sep 2017, 07:57 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Christian
Top achievements
Rank 1
answered on 08 Feb 2019, 09:45 AM

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();
            });

0
gregory
Top achievements
Rank 1
answered on 25 Feb 2019, 06:54 AM
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.
0
Alex Hajigeorgieva
Telerik team
answered on 27 Feb 2019, 08:11 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
gregory
Top achievements
Rank 1
answered on 01 Mar 2019, 03:05 AM

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

0
Alex Hajigeorgieva
Telerik team
answered on 01 Mar 2019, 08:32 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
gregory
Top achievements
Rank 1
answered on 06 Mar 2019, 01:30 AM

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. 

 

Tags
ResponsivePanel
Asked by
Christian
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Christian
Top achievements
Rank 1
gregory
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or