Scrolling through a list of inputs checks the input

[David]

I know this is an issue on an app for android, (I am not sure about iOS). I have a view with a large number of checkboxes for the user to select multiple items.  However if you attempt to scroll the view down and you touch a checkbox and scroll, that checkbox value will toggle, is there a way to prevent this?

To reproduce this you can make an view with the following ...

<ul data-role="listview" data-type="group">

 <li>

  Heading 1

  <ul>

   <li><label><input type="checkbox" checked="checked" />Lettuce</label></li>

   <li><label><input type="checkbox" checked="checked" />Carrots</label></li>

   <li><label><input type="checkbox" checked="checked" />Peas</label></li>

   <li><label><input type="checkbox" checked="checked" />Bread</label></li>
    <!-- repeat until you have enough to fill the whole screen -->

  </ul>

 </li>

</ul>

If you try to scroll anywhere except for header you will inadvertently select a checkbox, is there a way to work around this?

[Dimo]

Hello David,

Which Android version and browser are you testing with? Your scenario seems exactly the same as in our online checkboxes demo, however, it works correctly in my side when I add enough ListView items, so that scrolling appears (HTC One X, Android 4.1, default browser and Google Chrome).

Regards,
Dimo
the Telerik team

[David]

I was testing with android 4.2.2 on a Nexus 7 tablet (it is a hybrid application built with icenium).  I have not tested on a phone yet but I will give that a shot and see if it is different.
 -David

[David]

I just tested this on a 4.2.2 Nexus 4 phone as well, and the same issue occurs.  I have done a bit more testing, it appears that the scrolling works fine, it is just when you lift your finger any checkbox you were over gets checked.
-David

[Dimo]

Hello David,

The issue is present in Kendo UI Q3 2012, but is fixed in Q3 2012 SP1 (2012.3.1315). Please upgrade.

Greetings,
Dimo
the Telerik team

[J]

Hi,
My team is using Kendo UI Mobile v2012.3.1315 and we have same problem when using dataSource for ListView in PopOver.
Scrolling through a list of inputs still checks the input on iPad.
You can modify popover demo to reproduce it.
Just replace <ul data-role="listview">(...)</ul> with <ul id="listview"></ul> and add this script:

var data = [
    {name: 'Isabella Anderson'},
    {name: 'Josh Anderson'},
    {name: 'Linda Anderson'},
    {name: 'Oliver Anderson'},
    {name: 'James Williams'},
    {name: 'Barbara Williams'},
    {name: 'Josh Anderson'},
    {name: 'Linda Anderson'},
    {name: 'Oliver Anderson'},
    {name: 'James Williams'},
    {name: 'Barbara Williams'},
    {name: 'Josh Anderson'},
    {name: 'Linda Anderson'},
    {name: 'Oliver Anderson'},
    {name: 'James Williams'},
    {name: 'Barbara Williams'},
    {name: 'Josh Anderson'},
    {name: 'Linda Anderson'},
    {name: 'Oliver Anderson'},
    {name: 'James Williams'},
    {name: 'Barbara Williams'}
];
var dataSource = new kendo.data.DataSource({});
dataSource.data(data);
$('#listview').kendoMobileListView({
        template : '<label>Isabella Anderson<input type="checkbox"></label>',
        dataSource: dataSource
    });

I didn't check if it happens outside popover.

[Dimo]

Hi J K,

Here is a demo, which uses the latest Kendo UI version and works as expected. Please upgrade.

http://jsfiddle.net/dimodi/xgSAP/2/show/

You may notice that the discussed problem may occur on the online demos in desktop browsers. This is caused by the mouse events and does not influence mobile browsers on touch devices.

Greetings,
Dimo
the Telerik team