Immediate Close on mobile devices

8 posts, 0 answers
  1. Christian
    Christian avatar
    38 posts
    Member since:
    Jul 2014

    Posted 01 Sep 2017 Link to this post

    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!

  2. Stefan
    Admin
    Stefan avatar
    2293 posts

    Posted 05 Sep 2017 Link to this post

    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.
  3. Christian
    Christian avatar
    38 posts
    Member since:
    Jul 2014

    Posted 08 Feb Link to this post

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

  4. gregory
    gregory avatar
    40 posts
    Member since:
    Jun 2006

    Posted 25 Feb in reply to Christian Link to this post

    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.
  5. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    676 posts

    Posted 27 Feb Link to this post

    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.
  6. gregory
    gregory avatar
    40 posts
    Member since:
    Jun 2006

    Posted 28 Feb in reply to Alex Hajigeorgieva Link to this post

    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

  7. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    676 posts

    Posted 01 Mar Link to this post

    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.
  8. gregory
    gregory avatar
    40 posts
    Member since:
    Jun 2006

    Posted 05 Mar in reply to Alex Hajigeorgieva Link to this post

    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. 

     

Back to Top