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

Android - Ghost Click - ModalView over ListView

13 Answers 64 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Bill
Top achievements
Rank 1
Bill asked on 15 Jul 2013, 02:16 PM
Kendo Mobile version - 2012.3.1315.  I am having issues on native Android devices with click events.  I have a ListView and register to its data-click event.  I then show a ModalView over the ListView.  When I click the Close button of the ModalView, the underlying ListView click event fires as well (ghost click).   I cannot recreate this scenario in the Icenium simulator.  It only occurs on native devices.

Edit:  I've also tested this scenario on 2013.1.703 and the same behavior occurs.

    <div id="modalview-additional-info" style="width: 80%; height: 70%;">
        <div data-role="header">
            <div data-role="navbar">
                <span>Info</span>
                <a data-click="closeModalViewAdditionalInfo" data-role="button" data-align="right">Close</a>
            </div>
        </div>
 
        <div data-role="scroller">
            <p id="additionalInfo"></p>
        </div>
    </div>
 
<ul data-role="listview" data-type="group" data-click="equipmentListViewClick">
...
</ul>

13 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 16 Jul 2013, 11:06 AM
Hi Bill,

I have tried to reproduce the problem on a Nexus S device, running Android 4.1.2, but the mentioned behaviour was not observed. Could you please send a runnable demo of your implementation that we can test?

Thank you in advance for your cooperation.
 
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Bill
Top achievements
Rank 1
answered on 16 Jul 2013, 02:41 PM
I created a test project and was able to reproduce it.  You'll find it attached.

I think it has something to do with js include files.  When I created the test project using Icenium's default includes, I could not reproduce it.  However when I pulled in all the include files from my production application (i'm including kendo dataViz and web as well), the behavior occurred.

I still can't get it to reproduce in Icenium's simulator... it only occurs on the android native browser from what I can tell.
0
Accepted
Kiril Nikolov
Telerik team
answered on 18 Jul 2013, 07:02 AM
Hi Bill,

I have tested the demo you sent us and it is indeed clicking the ListView with a ghost click when you are closing the window. But when I updated the jQuery version to 1.9.1 and updated kendo.all.min to the latest built the misbehavior was gone. So I would suggest you to update your Kendo UI and jQuery files, in order to fix the "ghost click".
 
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Bill
Top achievements
Rank 1
answered on 18 Jul 2013, 01:01 PM
Thanks Kiril, I can confirm the latest build 2013.2.716 coupled with jQuery 1.9.1 have resolved many of my issues (including this one).
0
Aaron
Top achievements
Rank 2
answered on 16 Dec 2013, 11:29 PM
Hi

I am experiencing this issue.

The scenario is the same as the original poster. We are using the JQuery 1.9.1 and the Kendo 716 Build.

Only happens on Android. Simulator and iOS are fine.

Any ideas?
0
Kiril Nikolov
Telerik team
answered on 17 Dec 2013, 09:31 AM
Hi Aaron,

Please try upgrading to the latest build of Kendo UI Mobile and test again. If the problem still persists, please extract a runnable sample, and we will be more than happy to take a look.

Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Aaron
Top achievements
Rank 2
answered on 17 Dec 2013, 11:47 PM
Here is a quick demo that demonstrates the issue. (You can also get the demo from my Icenium account).

The modal window close button sits above the input on the welcome page. If you tap the close button the modal window closes and then the keyboard is activated to enter text into the input.

I am only able to replicate this on an Android device (Galaxy S4, Galaxy Nexus S, HTC One) . iOS and simulator work as expected.

Cheers
Aaron

 
0
Kiril Nikolov
Telerik team
answered on 18 Dec 2013, 08:31 AM
Hello Aaron,

I have updated the project that you sent us to the latest version of Kendo UI and tested it on Android and iOS devices and the behavior that you described was not reproduced. As I said please update to the latest version and try again.

Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Aaron
Top achievements
Rank 2
answered on 18 Dec 2013, 09:12 PM
I didn't realise I hadn't used the latest version. It was just a new Kendo Mobile app generated in Icenium.

Where do I find the latest version?

Cheers
Aaron
0
Aaron
Top achievements
Rank 2
answered on 18 Dec 2013, 10:11 PM
OK, I got the latest version of Kendo (v2013.3.1119)

The issue still exists in Android (Galaxy Nexus S).

Cheers
Aaron
0
Alexander Valchev
Telerik team
answered on 20 Dec 2013, 01:43 PM
Hi Aaron,

I was able to reproduce the issue on Samsung Nexus S with Android 4.1.2.
We will log it for further investigation. As a temporary workaround I suggest you to close the modal View with a timeout.
function closeModalView(e){
    setTimeout(function() {
        $("#modalview").kendoMobileModalView("close");
    }, 400);
}

Please accept my apology for the inconvenience caused.

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Aaron
Top achievements
Rank 2
answered on 22 Dec 2013, 10:05 PM
Thanks Alexander.

I came up with the same solution, although I found 300ms to be enough to stop the double click. 
I believe this is possibly related to some built in browser touch events having a delay (probably ~300ms) before firing?

In any case the 300ms wait for the modal window to close is not really a problem for us so is a suitable solution for now.

Thanks again for your help.

Cheers
Aaron
0
Alexander Valchev
Telerik team
answered on 23 Dec 2013, 08:30 AM
Hi Aaron,

Yes the issue is connected with the 300ms click delay that mobile browsers have. In case you are interested to learn more about it please check this blog post:

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
General Discussions
Asked by
Bill
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Bill
Top achievements
Rank 1
Aaron
Top achievements
Rank 2
Alexander Valchev
Telerik team
Share this question
or