Resetting Focus After Selecting a Date with the JQuery UI DateSelector
If you have been using JQuery I hope you have started using the JQuery UI library. I use the JQuery UI Datepicker plugin to left users select a date from a calendar when they enter a date input field. The plugin works great, but an issue was raised by a user this morning that I had to also solve on with my previous client.
The customer is in the process of migrating from an old school main frame terminal to the more modern web application we were building them. Their normal user experience means tabbing between input fields. The user pointed out that once they selected the date from the datepicker the TAB focus was reset to the top of the DOM. This was not good because the user’s normal flow was broken at this point.
The solution was to set the focus of the page back to the input field in the Datepicker’s onClose event handler.
$(".datePicker").datepicker({ showOn: 'button',
buttonImage: '../Images/Calendar.png',
buttonImageOnly: true, onSelect: function() { },
onClose: function() { $(this).focus(); }
});
The focus from the input field was lost because once the user clicked the date in the calendar the immediate DOM element went from the input field to the calendar, which is not actually part of the form. It is just another page element that is removed from the DOM once the selection is made. Once the calendar is removed from the page, the browser now sets the immediate focus to the top actionable element in the DOM, thus interrupting the user’s process flow. Intercepting the onClose event gives us the flexibility to reassert focus to the input field and the user can continue as normal.
Finally, notice how the showOn setting is ‘button’. When the showOn setting is either ‘focus’ or ‘both’ the calendar is displayed as soon as the user enters the field. It also means setting the focus back to the input field when the calendar closes will cause the calendar to be redisplayed. I tried a few work arounds to correct this, but could not find a way to fix it. Alas I think to make it a true fix will require fixing the plugin itself to meet this user requirement 100%.