Mobiscroll fails in Chrome, works fine in FF & IE

Question

I call Mobiscroll as follows:

$(joInputField).scroller({ 
    width:      60,  
    wheels:         wheels,     // wheels variable has been defined above
    headerText:     false,   // false for production!
    onSelect:       function(){  // event fired by BOTH set and cancel
        var stDate = '';
        var rawDate = $(joInputField).scroller('getValue');  
        // a bunch more code

This setup of Mobiscroll works fine in both Firefox 17 and IE9. However, it fails utterly in Chrome 23. In Chrome, I even get a page refresh when I click om the input field to pop up Mobiscroller.

The click events are attached as should be, so I am thinking it is not something in my HTML page that upsets Chrome. Also, I am not getting any errors in the console.

I just upgraded Mobiscroll from 1.5 to 2.3.1 This does not make any difference. Still fails in Chrome, and works like a charm in FF & IE.

Anyone have a hunch?

Answer 1

Okay, finally has the time to figure it out.

This is how my input element is configured:

<input id="mobiScroll" class="mobiscroll scroller" type="image" readonly="" value="5 07 05 19 5 5" name="mobiDick" src="<?php echo $options['assetsBase'] ?>/img/calendar-icon-40px2.png">

It turns out that in this configuration, with an image overlaying the input element, Chrome does not fire the focus event. And Mobiscroll depends on that focus-event.

The simplest solution (i.e. least time-consuming) was this work-around, whereby clicking the input element raise a focus event on said element, which in turn starts up Mobiscroll.

 // work around a Chrome quirk where focus event is not raised on input element:
joInputField.click(function() {
        joInputField.trigger('focus');                      
});

Hope this help someone, somewhere down the road...