Monday, May 7, 2018

SharePoint 2013 date picker scrolls form to the top

Just recently noticed a bug in SharePoint 2013... Yeah, I know it is 2018 now LOL

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!

4 comments:

Gabriel MP Oliveira said...

Thats great, the only solution which really works! Thanks a lot for sharing!

Ahmed Muneeb said...

Amazing solution! Great work! Thank you.

Marcos Anunciacao said...

Nice solution!!! Works perfectly to me!!!! Thank you very much

Unknown said...

Thanks. It worked great.