jQuery DatePicker and jQuery Multiselect Widget Scroll Issue

Recently I was using jquery ui datepicker control and jquery multiselect widget for a SharePoint project. I observed that whenever I scroll the page after opening these controls then these remained fixed on the screen. They should have either scrolled along with the control to which they were attached or should have closed.
But there they were on the screen without moving from their original position. Decided on fixing this issue I started exploring the respective API's and also how the close functionality is handled by the respective js files i.e. the jquery-ui.js and jquery.multiselect.js. I decided to collapse these opened datepicker calendar and the multiselect menu whenever web page scroll takes place as you are changing your focus to some other part of the page rather than these controls.
After drilling down through API for the jquery-ui.js datepicker and jquery.multiselect.js multiselect widget I came across the following methods.

jQuery DatePicker

hide() - Close previously opened datepicker

jQuery Multiselect Widget

close() - Closes the opened menu

So, now the task seemed quite simple. I had to simply call these methods on scroll so as to close.

Let me first show you how to do it for datepicker

$('#s4-workspace').scroll(function () {
               
   //Calling the blur method is important so that you can take the focus away  from the datepicker            
   $("#dpSelectedDate").blur();
   //The below method call will close the opened datepicker
   $("#dpSelectedDate").datepicker("hide");
});
In the above piece of code, I am using $('#s4-workspace').scroll() because in SharePoint context, when you scroll then this is the container that gets scrolled. Rest of the code is self explanatory.

Now, coming to jquery multiselect widget, the below code snippet will solve the issue
$('#s4-workspace').scroll(function () {
$("#selectControlID").multiselect("close");
});

Hope this might help you out at some point of time.

Cheers,
Geetanjali