Bug with Fastclick.js and the panel widget

[vshjxyz]

Hello,
I'm building an app using jQuery Mobile and Fastclick.js, but I noticed a bug on the panel dismiss.

If you open the panel and you try to close it by clicking (or tapping) outside the panel body, you will be unable to close it (if Fastclick is on).

this is probably due because of an "error" here https://github.com/jquery/jquery-mobile/blob/master/js/widgets/panel.js#L90-99 where the dismission is performed listening to the "mousedown" event.

Has anyone been into this?

I managed to create a jsbin example where you can see the problem

http://jsbin.com/IResuRo/16

The bug appears only if you are browsing with a mobile phone or touch-enabled browser

[jaspermdegroot]

It was changed from click to mousedown with this commit: 04022e2
Based on the commit message I would have expected vmousedown or vclick.

[vshjxyz]

I can understand the reason of the change but yeah, vmousedown should fix the problem I think, I couldn't test it tho

[ghost]

FYI - I have also always had this issue. Just tried changing the 'mousedown' to 'vmousedown' and it does now close the panel, but the panel then immediately re-opens, so might just be something else that needs tweaking also.

[stereoscott]

I ran into this today when experimenting with fastclick. @scottjehl may be able to enlighten us why the panel close event is bound to mousedown instead of vclick. My guess is it has something to do with the fact that closing the panel moves elements around on the page, and there is a warning about using vclick on moving targets, but I altered the panel widget source to use 'vclick' and it seemed to work just fine (in iOS).

Rather than patch jQuery Mobile, something I found that works is to tell jQM to add the 'needsclick' class to the panel so that fastclick will skip over it. You can do this by passing it in the options hash when you build your panel:

$('#nav').panel({classes: { modal: 'needsclick ui-panel-dismiss' }})

You could also pass this as a data attribute on your html element if you are using data-role="panel"

Hope this helps.

[ghost]

Works great. Thanks @stereoscott !

[pedrohh]

@stereoscott when I add that code the panel don't appear again. What's the other way you say to pass the attribute to html element?

[kerwitz]

Thank you @stereoscott, that fix works like a charm.
@pedrohh You can use data attributes to pass in any configuration value into jQuery mobile components.
I used the following code to fix this issue:
<div ... data-classes='{"modal":"needsclick ui-panel-dismiss"}'></div>

[frankie-loves-jesus]

Anybody here replaced the jQuery Mobile panel with https://github.com/jakiestfu/Snap.js/ (uses iScroll 5 for scrolling) and know how to make it work with FastClick?

http://jsfiddle.net/frank_o/kV85c/1/embedded/result/

[kumquat601]

@stereoscott , @kerwitz Thanks! It works very well !!! it' s good workaround.