The bug is simple but very annoying.
If you have a long list form, with many columns, and you have a few date columns at the bottom - beyond the scroll position - clicking any date picker will open the picker but will scroll your page to the top.
This happens when using non-IE browsers (I use chrome), and it is the result of the following code running INSIDE the picker iframe:
function: setFocusDatepicker
Is trying to set focus to the current date element.
Now, since this code is executed in the iframe it could be tricky to fix, since we don't have any code running in that iframe, but our code runs on the current window...
But there seems to be a fix for that we can use a little (a lot actually) JavaScript trickery to manipulate the frame's code from the containing document.
We will hook up to OnIframeLoadFinish function, which is called when the iframe of the picker is ready.
Once inside, we will find the function setFocusDatepicker INSIDE the iframe.
(Note: this is only allowed since we are on the same domain as the iframe...)
Then we will override the setFocusDatepicker to keep the workspace scrollTop, call setFocusDatepicker, and then restore the workspace scrollTop.
Here is the complete code, just call it once after all scripts were loaded:
ExecuteOrDelayUntilScriptLoaded(
function() {
if (typeof(window.original_OnIframeLoadFinish) !== 'function') {
window.original_OnIframeLoadFinish = window.OnIframeLoadFinish;
window.OnIframeLoadFinish = function() {
original_OnIframeLoadFinish.apply(this, arguments);
window.Picker.contentWindow.original_setFocusDatepicker = window.Picker.contentWindow.setFocusDatepicker;
window.Picker.contentWindow.setFocusDatepicker = function() {
workspaceTop = document.getElementById('s4-workspace').scrollTop;
window.Picker.contentWindow.original_setFocusDatepicker.apply(this, arguments);
document.getElementById('s4-workspace').scrollTop = workspaceTop;
}
}
}
}, "datepicker.js");
Enjoy!
