Android - Ghost Click - ModalView over ListView

[Bill]

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>

[Kiril Nikolov]

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

[Bill]

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.

[Kiril Nikolov]

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

[Bill]

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

[Aaron]

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?

[Kiril Nikolov]

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

[Aaron]

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

 

[Kiril Nikolov]

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

[Aaron]

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

[Aaron]

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

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

Cheers
Aaron

[Alexander Valchev]

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

[Aaron]

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

[Alexander Valchev]

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:

• http://www.icenium.com/blog/icenium-team-blog/2013/11/21/what-exactly-is.....-the-300ms-click-delay
  
  

Regards,
Alexander Valchev
Telerik