JQuery UI Datepicker loses focus when selecting date with mouse

Question

I am using JQuery ui with datepicker and when a user tabs on to a field, they appropriately get the calendar pop up.

1. User tabs (via key onto field
2. User s

Answer 1

I had to solve this problem as well and found that the given answers weren't exactly what I was looking for. Here is what I did.

A blog mentioned a jQuery function that would allow you to select the next form element on the screen. I imported that into my project and called it onClose of the datepicker dialog.

In case the link goes dead, here is the function

$.fn.focusNextInputField = function() {
    return this.each(function() {
        var fields = $(this).parents('form:eq(0),body').find('button,input,textarea,select');
        var index = fields.index( this );
        if ( index > -1 && ( index + 1 ) < fields.length ) {
            fields.eq( index + 1 ).focus();
        }
        return false;
    });
};

Then simply called it onClose of the datepicker

$(this).datepicker({
    onClose: function () {
       $(this).focusNextInputField();
    }
});

Hope this helps future visitors.