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

Click event does not fire reliably

18 Answers 1808 Views
Button (Mobile)
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Marco
Top achievements
Rank 1
Marco asked on 06 Mar 2014, 11:49 AM
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

18 Answers, 1 is accepted

Sort by
-1
Petyo
Telerik team
answered on 10 Mar 2014, 07:41 AM
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!
-1
Josef
Top achievements
Rank 1
answered on 12 Apr 2014, 06:05 PM
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?
-1
Petyo
Telerik team
answered on 15 Apr 2014, 11:20 AM
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!
 
-1
Andrey
Top achievements
Rank 1
answered on 11 Jul 2014, 08:04 AM
We had similar problem using ipad device. Setting DEFAULT_THRESHOLD to value "20" seems to be fixing the problem, thanks.
-1
Craig
Top achievements
Rank 1
answered on 01 Oct 2014, 04:04 PM
Can someone give further details on where this setting is?  

PS I am using AppBuilder
-1
Petyo
Telerik team
answered on 02 Oct 2014, 08:14 AM
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!
 
-1
Craig
Top achievements
Rank 1
answered on 02 Oct 2014, 03:47 PM
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
-1
Petyo
Telerik team
answered on 03 Oct 2014, 08:03 AM
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!
 
-1
Troy Clemons
Top achievements
Rank 1
answered on 07 Oct 2014, 06:00 PM
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
-1
AppsWiz
Top achievements
Rank 1
answered on 16 Feb 2015, 11:19 PM
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.
-1
Muttley
Top achievements
Rank 1
answered on 19 Feb 2015, 12:52 PM
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


-1
Petyo
Telerik team
answered on 19 Feb 2015, 03:56 PM
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!
 
-1
Liberty
Top achievements
Rank 1
answered on 26 Feb 2015, 10:30 PM
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);



-1
Liberty
Top achievements
Rank 1
answered on 26 Feb 2015, 10:38 PM
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.
-1
Petyo
Telerik team
answered on 27 Feb 2015, 07:23 AM
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!
 
-1
Muttley
Top achievements
Rank 1
answered on 02 Mar 2015, 02:26 PM
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
-1
Craig
Top achievements
Rank 1
answered on 02 Mar 2015, 04:38 PM
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.
-1
Petyo
Telerik team
answered on 04 Mar 2015, 09:22 AM
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!
 
Tags
Button (Mobile)
Asked by
Marco
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Josef
Top achievements
Rank 1
Andrey
Top achievements
Rank 1
Craig
Top achievements
Rank 1
Troy Clemons
Top achievements
Rank 1
AppsWiz
Top achievements
Rank 1
Muttley
Top achievements
Rank 1
Liberty
Top achievements
Rank 1
Share this question
or