apex:inputField breaking onchange binding?

Question

I have an <apex:selectList> whose onchange event rerenders an <apex:outputPanel> through an <apex:actionSupport>.

While I was busy celebrating the magic of Visualforce, I noticed that adding a set of <apex:inputField> within the same <apex:form> breaks the onchange/rerender binding.

---

The following markup (without the inputFields) works fine, when the selectList is changed, the value is displayed correctly:

<apex:page standardStylesheets="false" standardController="Opportunity" extensions="RP_MobileOppExtension">

    <link href="{!URLFOR($Resource.Bootstrap, 'bootstrap-3.3.4-dist/css/bootstrap.min.css')}" rel="stylesheet" />
    <apex:includeScript value="{!URLFOR($Resource.bootstrap, 'bootstrap-3.3.4-dist/js/bootstrap.min.js')}"/>

    <div class="container">
        <apex:pageMessages >
        </apex:pageMessages>
        <apex:form>
            <h3>Pricebooks</h3>
            <apex:selectList value="{!pricebookSelection}" size="1" >
                 <apex:selectOptions value="{!pricebookOptions}" />
                 <apex:actionSupport event="onchange" reRender="selection" action="{!dummy}"/>
            </apex:selectList>

            <h3>Selection</h3>
            <apex:outputPanel id="selection">
                {!pricebookSelection}
            </apex:outputPanel>
        </apex:form>
    </div>
</apex:page>

However, as soon as I add these five <apex:inputField>, the binding breaks and nothing happens if I change the selectList:

<apex:page standardStylesheets="false" standardController="Opportunity" extensions="RP_MobileOppExtension">

    <link href="{!URLFOR($Resource.Bootstrap, 'bootstrap-3.3.4-dist/css/bootstrap.min.css')}" rel="stylesheet" />
    <apex:includeScript value="{!URLFOR($Resource.bootstrap, 'bootstrap-3.3.4-dist/js/bootstrap.min.js')}"/>

    <div class="container">
        <apex:pageMessages >
        </apex:pageMessages>
        <apex:form >
            <apex:inputField value="{!Opportunity.Name}" label="Opp Name"/>
            <apex:inputField value="{!Opportunity.AccountId}" label="Account"/>
            <apex:inputField value="{!Opportunity.StageName}" label="Stage"/>
            <apex:inputField value="{!Opportunity.Probability}" label="Probability"/>
            <apex:inputField value="{!Opportunity.CloseDate}" label="CloseDate"/>

            <h3>Pricebooks</h3>
            <apex:selectList value="{!pricebookSelection}" size="1" >
                <apex:selectOptions value="{!pricebookOptions}" />
                <apex:actionSupport event="onchange" reRender="selection" action="{!dummy}"/>
            </apex:selectList>

            <h3>Selection</h3>
            <apex:outputPanel id="selection">
                {!pricebookSelection}
            </apex:outputPanel>
        </apex:form>
    </div>
</apex:page>

---

Is this expected behavior/why is this happening? I'm sure there's a simple explanation, but I'm extremely curious.

Answer 1

I bet one of those are a required field which is causing an error. Since you have no ID on the pagemessages and you are not rerendering it then you cannot see the error.

Resolution:

1. Add a ID to pagemessages
2. Rerender the pagemessages
3. Wrap select in an action region to process on the select on the onchange action (If you do not need the Inputs to be processed)

<link href="{!URLFOR($Resource.Bootstrap, 'bootstrap-3.3.4-dist/css/bootstrap.min.css')}" rel="stylesheet" />
<apex:includeScript value="{!URLFOR($Resource.bootstrap, 'bootstrap-3.3.4-dist/js/bootstrap.min.js')}"/>

<div class="container">
    <apex:pageMessages id="msgs">
    </apex:pageMessages>
    <apex:form >
        <apex:inputField value="{!Opportunity.Name}" label="Opp Name"/>
        <apex:inputField value="{!Opportunity.AccountId}" label="Account"/>
        <apex:inputField value="{!Opportunity.StageName}" label="Stage"/>
        <apex:inputField value="{!Opportunity.Probability}" label="Probability"/>
        <apex:inputField value="{!Opportunity.CloseDate}" label="CloseDate"/>

        <h3>Pricebooks</h3>
        <apex:actionRegion>
        <apex:selectList value="{!pricebookSelection}" size="1" >
            <apex:selectOptions value="{!pricebookOptions}" />
            <apex:actionSupport event="onchange" reRender="selection, msgs" action="{!dummy}"/>
        </apex:selectList>
        </apex:actionRegion>

        <h3>Selection</h3>
        <apex:outputPanel id="selection">
            {!pricebookSelection}
        </apex:outputPanel>
    </apex:form>
</div>