Collapsible heading vclick issue

[marcing]

This bug concerns b1 and b2:

Line 3482-3483:
collapsibleHeading
.bind( "vclick", function( event ) {

should be changed to:
collapsibleHeading
.bind( "click", function( event ) {

vclick => click

This change fixes a bug a on Android 2.2 where collapsing or expanding cause the page the scroll down/up and the click is invoked on another element.
For example:

1. We click on collapse heading.
2. Collapsible content collapses, website is shorter now.
3. Website scrolls up, because content is shorter.
4. An element which is now in this position (after scroll) is clicked (not the collapissible heading).

Thank you,
Marcin Gil
Marcin

[toddparker]

Is this with the collapsible plugin or the docs JS?

[marcing]

It happens with following scenario:

<buttons that get clicked on collapse>
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>...</h3>
<form ...>
</form>
</div>
<buttons that get clicked when we scroll to the collapsible header>

Scrolling is done with this piece of code:
$("div[data-role='collapsible']").live('expand', function()
{
var top = $(this).position().top;
$.mobile.silentScroll(top);
});

[marcing]

It does not happen on desktops, just on native android browser.

[marcing]

I've prepared an example:
http://dl.dropbox.com/u/11435743/jqm-2122/index.html
or shortened:
http://goo.gl/TfeLO

Issue exists only on Android+Webkit browser. Mobile firefox is fine.

[marcing]

This issue is valid also for beta3.

[toddparker]

@marcing - I just tested the collapsibles here on a=our HTC Incredible (2.2) and wasn't able to reproduce the problem:
http://jquerymobile.com/test/docs/content/content-collapsible.html

Can you provide details on how to reproduce?

[marcing]

Try clicking Collapsible, other buttons should be clicked by themselves (side effect). Try my example, not the offical demo:
http://dl.dropbox.com/u/11435743/jqm-2122/index.html

[toddparker]

@marcing - I was able to reproduce this occasionally in my Android 2.2 phone. The issue is that we use vclick events which covers both mouse and touch events for faster performance. I think your scrolling code is moving the elements on the page so quickly that there is a mismatch between the target of the click and touch events. If you are going to scroll the page, I'd suggest waiting a bit before starting the scroll or switching the events to just use click, like your originally suggested. The issue is that there is a noticeable delay/lag if just using click so there is a tradeoff.

[marcing]

Dear Todd,

There is no scrolling code in case of collapse event, the unwanted click occurs also when you close the collapsible content. This is clearly a bug, where one action causes another unwanted action without any third party code.

On a website we are developing this behaviour is extremely annoying to users and we have to edit jquery mobile source directly, because there is no workaround for this.
I am very confident you need to change this one.

Thanks,
Marcin

[marcing]

When considering the expand issue with third party scrolling you must admin that this scenario will be very common, since it is not desirable that the user expands an area which he cannot see after expansion. I was trying to solve the issue with timeout, but it started to work after 0.5s delay and it was not successful in 100% cases. This kind of delay it confusing for the user. It seems that the jump is not related to his click after such a long delay.

[jblas]

@toddparker

I agree with @marcing, this falls into that bucket of when not to use vclick ... which is anytime an action can cause the content underneath what is being clicked to change.

The only reliable way to avoid this problem is to wait for the click. Disappointing, I know.

[marcing]

Thank you!