+ Start a Discussion
mworldmworld 

inputField Calendar Widget

I have a custom screen with several input fields including one which is a date. For some reason, when the screen loads the calendar widget is always selected and open. This happens whether or not there is a date value to display, regardless of its placement or tab index on the page. This is annoying and confusing to users and does not happen on "stock" pages. Any ideas how to stop this?
 
Code:
<TD WIDTH="33%"><apex:inputField required="true" value="{!Staff_IP__c.Assigned__c}"/></TD>
 
Mauricio
Best Answer chosen by Admin (Salesforce Developers) 
Ron HessRon Hess
I think you can prevent the focus by redefining or blocking the action

<script>
function setFocusOnLoad() {}
</script>

or
<script>beenfocused = true; </script>

All Answers

Ron HessRon Hess
does this occur in every browser?
if not, which does it occur in?

can you post a short sample of a page that does this?

Thanks
mworldmworld

It occurs in Firefox 2.0.x.x and IE 7. Both on Windows. Have not tested elsewhere as this is an internal site and other browsers are not used.

By sample page, do you mean a page and controller that use a standard object so you can run it yourself?

Mauricio

Ron HessRon Hess
yes, that makes it very easy for me.
I've not see this reported, however is this field the first field of the form?

if so, the date popup occurs when the field is focused , so this could be the issue
mworldmworld

Ron:

It's not the first field on the form, but it is the first field on the form that is not a checkbox or dropdown. If I place a text input field above it the focus goes there instead. Unfortunately, in all of the cases I have, I don't have a need for a text input field on the page. Any idea of how to divert the focus?

Mauricio

mworldmworld

Here's my InputField code:

Code:
<apex:inputField id="Date" onFocus="setNamedFocus(document.forms[0].elements[0])" required="true" value="{!Staff_IP__c.Assigned__c}"/>


The Source code shows that the Calendar widget is coded to open and select a date when it receives focus. It shows that a calendar widget is a text field under the covers. It also shows that my attempts to directly call elementFocus(element) or setNamedFocus(element_name) in functions.js to explicitly re-direct the focus were completely ignored.

Code:
<input  id="j_id0:newIPForm:j_id2:Date" name="j_id0:newIPForm:j_id2:Date" onfocus="DatePicker.pickDate(false, 'j_id0:newIPForm:j_id2:Date', false);" size="12" type="text" value="4/28/2008" />

The page is coded to set Focus to the first available text input field onLoad.

Code:
<body onLoad="if (this.bodyOnLoad) bodyOnLoad();" <snip> >

function bodyOnLoad() {
 setFocusOnLoad();
        <snip>
}

function setFocusOnLoad() {
    if (!beenFocused) { setFocus(); }
}

function setFocus() {
    // search for a tabIndexed field to focus on
    for(var firstIndex=1; firstIndex < 5; firstIndex ++ ){
        var nextIndex = firstIndex;
        for (var frm = 0; frm < document.forms.length; frm++) {
            for (var fld = 0; fld < document.forms[frm].elements.length; fld++) {
                var elt = document.forms[frm].elements[fld];
                if ( elt.tabIndex != nextIndex) continue;
                if ((elt.type == "text" || elt.type == "textarea" || elt.type == "password") && !hiddenOrDisabled(elt)
                   && elt.name != "sbstr" &&  elt.name.indexOf("owner") != 0 && elt.name.indexOf("tsk1") != 0 && elt.name.indexOf("evt1") != 0) {
                    elt.focus();
                    if (elt.type == "text" && !hiddenOrDisabled(elt)) {
                        elt.select();
                    }
                    return true;
                } else {
                    nextIndex++;
                    fld = 0;
                }
            }
        }
    }

    // failed to find a tabIndexed field, try to find the field based on it's natural position.
    // TODO: is this even needed anymore—
    for (var frm = 0; frm < document.forms.length; frm++) {
        if (document.forms[frm].name != "sbsearch" && document.forms[frm].name != "srch_solution_sbar" &&
            document.forms[frm].name != "srch_product_sbar" && document.forms[frm].name != "srch_document_sbar") {
            for (var fld = 0; fld < document.forms[frm].elements.length; fld++) {
                var elt = document.forms[frm].elements[fld];
                // skip buttons, radio, or check-boxes
                // to skip "select" types, remove from if statement
                if ((elt.type == "text" || elt.type == "textarea" || elt.type == "password") && !hiddenOrDisabled(elt) &&
                     elt.name.indexOf("owner") != 0 && !hiddenOrDisabled(elt)) {
                    elt.focus();
                    // select text in text field or textarea
                    if (elt.type == "text" && !hiddenOrDisabled(elt)) {
                        elt.select();
                    }
                    return true;
                }
            }
        }
    }

    return true;
}

Does anyone know how to override the focus setting without throwing out VF entirely and writing an entirely hand coded page?

Mauricio

Ron HessRon Hess
I think you can prevent the focus by redefining or blocking the action

<script>
function setFocusOnLoad() {}
</script>

or
<script>beenfocused = true; </script>
This was selected as the best answer
mworldmworld
Ahhh. Yes. That should work. Thanks!
Rajesh ShahRajesh Shah

I have a similar problem, but in my case it is a standard Salesforce edit page. I have 2 dropdowns and then a date field. When the user edits the record, the calendar widget automatically pops up.

Is there a way to prevent this?