Android - Ghost Click - ModalView over ListView

14 posts, 1 answers
  1. Bill
    Bill avatar
    75 posts
    Member since:
    Feb 2013

    Posted 15 Jul 2013 Link to this post

    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>
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 16 Jul 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Bill
    Bill avatar
    75 posts
    Member since:
    Feb 2013

    Posted 16 Jul 2013 Link to this post

    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.
  5. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 18 Jul 2013 Link to this post

    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!
  6. Bill
    Bill avatar
    75 posts
    Member since:
    Feb 2013

    Posted 18 Jul 2013 Link to this post

    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).
  7. Aaron
    Aaron avatar
    11 posts
    Member since:
    Jul 2013

    Posted 16 Dec 2013 Link to this post

    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?
  8. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 17 Dec 2013 Link to this post

    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!
  9. Aaron
    Aaron avatar
    11 posts
    Member since:
    Jul 2013

    Posted 17 Dec 2013 Link to this post

    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

     
  10. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 18 Dec 2013 Link to this post

    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!
  11. Aaron
    Aaron avatar
    11 posts
    Member since:
    Jul 2013

    Posted 18 Dec 2013 Link to this post

    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
  12. Aaron
    Aaron avatar
    11 posts
    Member since:
    Jul 2013

    Posted 18 Dec 2013 Link to this post

    OK, I got the latest version of Kendo (v2013.3.1119)

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

    Cheers
    Aaron
  13. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 20 Dec 2013 Link to this post

    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!
  14. Aaron
    Aaron avatar
    11 posts
    Member since:
    Jul 2013

    Posted 22 Dec 2013 Link to this post

    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
  15. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 23 Dec 2013 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready