Click event does not fire reliably

[Marco]

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

[Petyo]

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

[Josef]

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?

[Petyo]

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

 

 

[Andrey]

We had similar problem using ipad device. Setting DEFAULT_THRESHOLD to value "20" seems to be fixing the problem, thanks.

[Craig]

Can someone give further details on where this setting is?  

PS I am using AppBuilder

[Petyo]

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

 

 

[Craig]

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

[Petyo]

Hello Craig,

yes, this is correct. 

Regards,
Petyo
Telerik

 

 

[Troy Clemons]

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

[AppsWiz]

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.

[Muttley]

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

[Petyo]

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

 

 

[Liberty]

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

[Liberty]

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 [phone] / 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.

[Petyo]

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

 

 

[Muttley]

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

[Craig]

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.

[Petyo]

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