Click event does not fire reliably

Thread is closed for posting
19 posts, 0 answers
  1. Marco
    Marco avatar
    1 posts
    Member since:
    Jan 2014

    Posted 06 Mar 2014 Link to this post

    My mobile app build with kendo ui failed user acceptance testing because the app is "slow", "sluggish" or "sometimes stops working". After some research I found out that the app quite often fails to react when the user clicks a button: the click event does not fire when the user does not tap "the right way". Since my app aims at inexperienced users, this is a serious issue.

    The problem can easily be reproduced in the button/events demo, especially when viewed on a mobile device:

    http://demos.telerik.com/kendo-ui/mobile/button/events.html

    Just between touching and releasing move the finger or mouse a little bit to the side or up/down, and the click event does not fire.

    What's worse (and why i would consider this an error) is that the user gets a visual feedback that the button was pressed --- but nothing happens!

    It's kind of like the opposite of the problem in this thread: http://www.telerik.com/forums/button-click-event-firing-when-trying-to-scroll where someone is (ab?)using oversized buttons.

    Is there a way to set the sensibility of how much wiggle is allowed until a touch isn't a click anymore? Any other solution?

    I am using kendoui.complete.2013.3.1119. The behaviour was tested on iOS6 & iOS 7 (iPad).

    TIA Marco
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 10 Mar 2014 Link to this post

    Hi Marco,

    Thank you for your feedback. A move threshold sensitivity constant is available internally, but not yet exposed as a configuration option. Our tests so far show that most mobile devices include such internal threshold too, the only "problematic" platform being Windows Phone. The line in question is: 

    DEFAULT_THRESHOLD = support.browser.msie ? 5 : 0, // WP8 and W8 are very sensitive and always report move.

    you may experiment with this setting and see if it improves the behavior in your case. 

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Josef
    Josef avatar
    3 posts
    Member since:
    Jul 2013

    Posted 12 Apr 2014 Link to this post

    I am having the same issue. If I try it on the simulator, when you click and drag a button, it stays active but there is no click. On the console I get an error: undefined is not a function.

    Can you please be more specific on how to solve this?
  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 15 Apr 2014 Link to this post

    Hello Josef,

    the problem you describe (undefined is not a function) is not a known one - I would like to suggest that you send us a sample project that reproduces the problem - we will take a look and advise you accordingly. 

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Andrey
    Andrey avatar
    1 posts
    Member since:
    Oct 2013

    Posted 11 Jul 2014 Link to this post

    We had similar problem using ipad device. Setting DEFAULT_THRESHOLD to value "20" seems to be fixing the problem, thanks.
  7. Craig
    Craig avatar
    43 posts
    Member since:
    Aug 2013

    Posted 01 Oct 2014 Link to this post

    Can someone give further details on where this setting is?  

    PS I am using AppBuilder
  8. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 02 Oct 2014 Link to this post

    Hi,

    the setting in question has been exposed as a static method in order to avoid the source code modification. You need to include this snippet in your code.

    kendo.UserEvents.defaultThreshold(YOUR_NUMERIC_VALUE_HERE);

    Notice that this is a feature enabled in the recent releases of Kendo UI. 

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Craig
    Craig avatar
    43 posts
    Member since:
    Aug 2013

    Posted 02 Oct 2014 in reply to Petyo Link to this post

    Petyo, 

    Thanks for the update.

    So can I just include this line in my app initialization code and it will be a global setting?

    Thanks
  10. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 03 Oct 2014 Link to this post

    Hello Craig,

    yes, this is correct. 

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. Troy Clemons
    Troy Clemons avatar
    69 posts
    Member since:
    Apr 2010

    Posted 07 Oct 2014 in reply to Craig Link to this post

    I have added the code below

    <script>
            var app = new kendo.mobile.Application(document.body, {
                transition: 'slide',
                loading: "<h1>Please Wait...Getting Data....</h1>",
                skin: "flat"
            });
            kendo.UserEvents.defaultThreshold(20);
    </script>


    But id does not seem to affect the button at all, is this the correct usage
    or did i miss somehting.

    Thanks

    Triy
  12. AppsWiz
    AppsWiz avatar
    15 posts
    Member since:
    Apr 2013

    Posted 16 Feb 2015 Link to this post

    Thanks for this. It is working much better for me now that I have set it to 20 on iOS devices.

    This was becoming a big issue with one of our partners.
  13. Muttley
    Muttley avatar
    2 posts
    Member since:
    Dec 2014

    Posted 19 Feb 2015 Link to this post

    I have a PhoneGap 3.7.0 built app using Kendo UI Pro 2014.3.1409 targeting Android and iOS, which is exhibiting issues when tapping a button in the navbar using an iOS device running 8.1.3 (seen on iPhone 5, iPhone 6, and iPad). 

    I have tried setting kendo.UserEvents.defaultThreshold(20), but this has not helped. 

    Here's a block from one of our views...

    <div data-role="header">
        <div data-role="navbar">
            <a href="#view1" data-role="button" data-icon="my-back"  class="nav-button" data-align="left"></a>
            <span data-role="view-title"></span>
            <a href="#view2" data-role="button" data-icon="my-settings"  class="nav-button" data-align="right"></a>
        </div>
    </div>

    I have also tried using kendoTouch attached to a div, but that also has not helped. 

    Is this still a known issue as from all out testing the firing of click events on iOS is very random and currently we have an unshippable app. As a side note, Android is absolutely fine.

    Thanks in advance!

    Heath


  14. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 19 Feb 2015 Link to this post

    Hello guys,

    I would like to to point out that the following snippet is incorrect, and does not affect the mobile app navigation handling:

    var app = new kendo.mobile.Application(document.body, {
                transition: 'slide',
                loading: "<h1>Please Wait...Getting Data....</h1>",
                skin: "flat",
                init: function() {
                   kendo.UserEvents.defaultThreshold(20);
                }
            });

    the threshold should be set before the instantiation of the app:


    kendo.UserEvents.defaultThreshold(20);
    var app = new kendo.mobile.Application(document.body);

    I would like to advise you all to update the implementation accordingly for improved results. 


    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  15. Liberty
    Liberty avatar
    2 posts
    Member since:
    Jan 2014

    Posted 26 Feb 2015 in reply to Petyo Link to this post

    Thanks Petyo.

    I did not see any improvement though.  On all iOS (v8.0+) devices I tested, I would see an unpredictable "highlighting" of the button but the code doesn't trigger, if user did not touch "correctly".  I do not understand why Kendo / Telerik  would us developers to do this on our own instead of putting these adjustments within their touch framework

    Using Cordova 4.2 iOS platform 3.7.0 / Kendo 2014.3.1411 / jQuery 2.0.3 - no other js libraries used
    Here is my code:  

    <header data-role="header">
            <div data-role="navbar">   
                <a data-align="left" data-role="backbutton">
                    Back
                </a
                <div data-role="title"
                    data-bind="text: viewTitle"
                    style="font-size: 0.7em;"
                </div>                    
                <a data-align="right" data-role="button" data-bind="click: save">
                    <i class="icon-stack"></i>
                    Save
                </a>           
            </div>
    </header>

    Code before initializing mobile app.

    kendo.UserEvents.defaultThreshold(kendo.support.mobileOS.device === 'android' ? 0 : 20);



  16. Liberty
    Liberty avatar
    2 posts
    Member since:
    Jan 2014

    Posted 26 Feb 2015 in reply to Petyo Link to this post

    Thanks.   I did not see any improvement though.  On all iOS (v8.0+) devices I observed, button will be "highlighted" but code will not execute if the user did not tap correctly.   I do not understand why Kendo / Telerik  would advise us developers to do this on own own instead of putting these adjustments within the touch framework.

    Using cordova 4.2 iOS platform 3.7.0 / Kendo UI Mobile 2014.3.1411 / jQuery v2.0.3 with no other JS frameworks used.

    Before initializing the mobile app instance: 
    kendo.UserEvents.defaultThreshold(kendo.support.mobileOS.device === 'android' ? 0 : 20);

    Markup:
    <header data-role="header">
            <div data-role="navbar">   
                <a data-align="left" data-role="backbutton">
                    Back
                </a
                <div data-role="title"
                    data-bind="text: viewTitle"
                    style="font-size: 0.7em;"
                </div>                    
                <a data-align="right" data-role="button" data-bind="click: save">
                    <i class="icon-stack"></i>
                    Save
                </a>           
            </div>
                 
        </header>

    Please help.
  17. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 27 Feb 2015 Link to this post

    Hello,

    This is a good question. Configuring the userevents threshold has some adverse effects on other parts of the framework, namely the drag and drop ones. The mobile scroller is also affected. 

    I am not sure why the configuration does not work in your case, though. I don't think that the cordova environment matters in that case - I may be wrong, though. Is there a chance for you to isolate your case in a runnable Dojo? We will examine it more closely. Thank you in advance. 

    Another thing worth mentioning here is the following new feature, introduced in the Q1 2015 release (currently available as beta) - mobile buttons may be configured to act on press (instead on release). This makes sense for buttons in the header/footer parts of the application. 

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  18. Muttley
    Muttley avatar
    2 posts
    Member since:
    Dec 2014

    Posted 02 Mar 2015 in reply to Petyo Link to this post

    I have an incident open with Telerik on iOS button responsiveness, but I wanted to update this thread for the community. 

    What I would like to see is the Kendo docs updated to ensure developers use the new features, otherwise it's easy to get lost in hundreds of forum threads which cover some (very) old versions of Kendo UI and PhoneGap. 

    I have tried the new functionality in the Beta Q1 2015 release as recommended by Petyo, and I have found it resolves the iOS responsiveness issues. Good luck all!

    Muttley
  19. Craig
    Craig avatar
    43 posts
    Member since:
    Aug 2013

    Posted 02 Mar 2015 in reply to Muttley Link to this post

    I second Muttley's statement. 

    "What I would like to see is the Kendo docs updated to ensure developers use the new features, otherwise it's easy to get lost in hundreds of forum threads which cover some (very) old versions of Kendo UI and PhoneGap."

    I also think this is something I shouldnt have to worry about- it should be taken care of in the kendo framework. Its the little details like this that keeps hybrid apps from being at the same level of native apps.
  20. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 04 Mar 2015 Link to this post

    Hi,

    the feature we have announced has been documented accordingly - you can check that in the link from my last reply. 

    I am going to lock this thread in order to avoid further confusion and/or misleading suggestions on the topic. In case someone needs any further assistance with the issue, please open a support ticket. Thank you all for the help!

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready