Clicking the calendar button with JQM+iOS causes a navigation

[kevgrig]

On multiple different versions of iOS, when a user clicks the calendar button at the right of the input textbox, the calendar momentarily pops up but then the JQM app navigates and reloads the current page (presumably because the href of the button is #). I've tried both v4.2.3 and building from master with the same results.

[kevgrig]

Confirmed my hypothesis by modifying master with the following patch and the bug is fixed:

$ git diff
diff --git a/src/js/framework/jqm.js b/src/js/framework/jqm.js
index 18301f0..bb442a5 100644
--- a/src/js/framework/jqm.js
+++ b/src/js/framework/jqm.js
@@ -246,7 +246,7 @@ JTSageDateBox._create = function() {
                                        o.buttonIcon = o.buttonIconDate;
                                }
                        }
-                       $( "<a href='#' class='ui-input-clear ui-btn ui-icon-" + 
+                       $( "<a href='javascript: return false;' class='ui-input-clear ui-btn ui-icon-" + 
                                        o.buttonIcon +
                                        " ui-btn-icon-notext ui-corner-all'></a>" )
                                .attr( "title", w.__( "tooltip" ) )

[kevgrig]

I suspect it might be an issue with vclick on iOS and the packages I'm using:

There are still cases where both target and coordinate identification fail, which results in the click event being dispatched and either triggering the default action of the element, or in the case where content has been shifted or replaced, triggering a click on a different element. If this happens on a regular basis for a given element/control, we suggest you use click for triggering your action.

https://api.jquerymobile.com/vclick/

I'm using PhoneGap+JQM 1.4.5 so I wonder if the browser that's packaged by Phonegap on iOS is an older version that doesn't work well with JQM's vclick.

[kevgrig]

Confirmed my hypothesis by reverting my patch and then adding data-datebox-click-event="click" to my elements and the problem went away.

I'd prefer not to lose the vclick responsiveness. How do you feel about the patch above to change # to javascript: return false? I believe this is supported by all browsers (it's definitely not new; I remember using this over a decade ago, perhaps even in Netscape days). Since this button never needs to navigate anywhere, it would seem this would allow vclick to continue to be used without the possibility of a navigation? If you like this, I'll make a pull request.

[jtsage]

Yeah, I'm on board. I'll let in hang for a few days so you can do the pull request and get the credit :)

Thanks!

~j

[kevgrig]

Submitted: https://github.com/jtsage/jquery-mobile-datebox/pull/417 Thanks!

[jtsage]

merged. thanks again!

[jtsage]

This will go in the next release version. My guess is sometime over the holiday. As much as I'd love to push it today, I'm not quite ready.