Why setting focus on a hidden element has caused sidebar uncollapsable

Question

I have enabled collapse sidebar in my customize/user interface. On my Visualforce page, it works fine originally. But since my first element in the page is an inputField of a datetime type, and it auto pops up the datetime picker once re-load, I added the following code to set focus on a hidden elment.

In page:

<input id="hiddenElement" type="hidden" />

In JS:

window.onload = setFocus;

function setFocus() {
    document.getElementById("hiddenElement").focus();
}

This works fine but the issue with this is the sidebar suddenly refused to collapse.

I can walkaround this by putting this code into document.ready() - which might be a little bit unstable for setting focus. Or I can use the following code:

if (document.getElementById('sidebarDiv')){
        Sidebar.prototype.theSidebar = new Sidebar(document.getElementById('sidebarDiv'), true, false);
    }

But I am feeling confused about why setting focus on the hidden element during page loading has caused sidebar collapse stopped working. Any thoughts?

Answer 1

It is likely that you are overriding the window.onload handler, canceling code that Salesforce has assigned to to handle that event. You can add a function to handle the onload in a way that won't interfere. Here's an answer from the question "adding to window.onload event" that shows two functions being added:

addEvent(window, 'load', function(){ some_methods_1() });
addEvent(window, 'load', function(){ some_methods_2() });

function addEvent(element, eventName, fn) {
    if (element.addEventListener)
        element.addEventListener(eventName, fn, false);
    else if (element.attachEvent)
        element.attachEvent('on' + eventName, fn);
}