Telerik Forums / Kendo UI for jQuery Forum / Button (Mobile) /

Click event does not fire reliably

Kendo UI
Resources Buy Try

Thread is closed for posting

19 posts, 0 answers

Marco

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
Petyo
Admin

2444 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!
Josef

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?
Petyo
Admin

2444 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!
Andrey

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.
Craig

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
Petyo
Admin

2444 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!
Craig

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
Petyo
Admin

2444 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!
Troy Clemons

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
AppsWiz

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.
Muttley

3 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
Petyo
Admin

2444 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!
Liberty

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

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.
Petyo
Admin

2444 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!
Muttley

3 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
Craig

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.
Petyo
Admin

2444 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!

Click event does not fire reliably

Marco

Petyo

Josef

Petyo

Andrey

Craig

Petyo

Craig

Petyo

Troy Clemons

AppsWiz

Muttley

Petyo

Liberty

Liberty

Petyo

Muttley

Craig

Petyo