jsf - panelGrid を selectonemenu に囲む効果

Question

primefaces selectOneMenu に問題があり、(誤って) 修正してもらいました。しかし、私はその理由を理解できません。それを機能させるために行ったことは、すべてのコンポーネントの周りに panelGrid をラップすることだけです。(コンバーターや基礎となる Bean には触れていません)

例に従って、動作を再現します。

豆：

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import javax.annotation.PostConstruct;
import javax.inject.Named;

import org.apache.myfaces.extensions.cdi.core.api.scope.conversation.ViewAccessScoped;

@Named("testBean")
@ViewAccessScoped
public class TestBean implements Serializable {

    private static final long serialVersionUID = -8394494304848902124L;

    private String selectedString;

    private List<String> things;
    private List<String> listAvailableStrings;

    @PostConstruct
    public void init() {
        things = new ArrayList<String>();
        things.add("Car");
        things.add("Cat");
        things.add("House");
        things.add("Bank");

        listAvailableStrings = new ArrayList<String>();
        listAvailableStrings.add("one");
        listAvailableStrings.add("two");
        listAvailableStrings.add("three");
        listAvailableStrings.add("four");

    }

    public void printThings() {
        System.out.println(this.things.get(0));
    }

    public void onStringChange() {
        System.out.println(this.selectedString);
    }

    public String getSelectedString() {
        return selectedString;
    }

    public void setSelectedString(String selectedString) {
        this.selectedString = selectedString;
    }

    public List<String> getListAvailableStrings() {
        return listAvailableStrings;
    }

    public void setListAvailableStrings(List<String> listAvailableStrings) {
        this.listAvailableStrings = listAvailableStrings;
    }

    public List<String> getThings() {
        return things;
    }

    public void setThings(List<String> things) {
        this.things = things;
    }

}

selectOneMenu が機能していない私の xhtml のバージョン( selectedString は常に null です):

    <h:form id="testForm">
        <p:panelGrid id="testPanel">

            <p:dataTable id="testTable" value="#{testBean.things}" var="thing">
                <p:column headerText="Things">
                    <h:outputText value="#{thing}" />
                </p:column>

            </p:dataTable>

            <p:commandButton id="btnPrintThing" value="DoIT"
                actionListener="#{testBean.printThings()}">
            </p:commandButton>


    </p:panelGrid>
            <p:spacer height="20" width="100%" />

            <p:panelGrid id="panel2" columns="3" border="0" cellpadding="0"
                style="width:80%">

                <p:panelGrid id="panel2_1">

                    <p:row>
                        <p:column>
                            <p:outputLabel for="somTestSOM" value="selectOneNotWorking"></p:outputLabel>
                        </p:column>
                        <p:column>
                            <h:messages></h:messages>
                            <p:selectOneMenu id="somTestSOM" onchange=""
                                value="#{testBean.selectedString}">
                                <p:ajax update="@([id$=panel2_3])"
                                    listener="#{testBean.onStringChange}" />
                                <f:selectItem itemValue="#{null}" itemLabel="" />
                                <f:selectItems value="#{testBean.listAvailableStrings}"
                                    var="thingSOM" itemValue="#{thingSOM}" itemLabel="#{thingSOM}"></f:selectItems>
                            </p:selectOneMenu>
                        </p:column>

                    </p:row>

                </p:panelGrid>

                <p:spacer width="1" height="250"
                    style="position: relative; bottom: -5px; top: -10px; background-color: #A8A8A8; margin-left: 20px; margin-right: 20px" />


                <p:panelGrid id="panel2_3">
                    <p:row>
                        <p:column colspan="2">
                            <p:outputLabel value="#{testBean.selectedString}"></p:outputLabel>
                        </p:column>
                    </p:row>
                </p:panelGrid>
            </p:panelGrid>

    </h:form>

意図したとおりに動作している私の xhtml のバージョン: (selectedString はselectOneMenuの選択を表します)

<h:form id="testForm">
        <p:panelGrid id="testPanel">

            <p:dataTable id="testTable" value="#{testBean.things}" var="thing">
                <p:column headerText="Things">
                    <h:outputText value="#{thing}" />
                </p:column>

            </p:dataTable>

            <p:commandButton id="btnPrintThing" value="DoIT"
                actionListener="#{testBean.printThings()}">
            </p:commandButton>



            <p:spacer height="20" width="100%" />

            <p:panelGrid id="panel2" columns="3" border="0" cellpadding="0"
                style="width:80%">

                <p:panelGrid id="panel2_1">

                    <p:row>
                        <p:column>
                            <p:outputLabel for="somTestSOM" value="selectOneNotWorking"></p:outputLabel>
                        </p:column>
                        <p:column>
                            <h:messages></h:messages>
                            <p:selectOneMenu id="somTestSOM" onchange=""
                                value="#{testBean.selectedString}">
                                <p:ajax update="@([id$=panel2_3])"
                                    listener="#{testBean.onStringChange}" />
                                <f:selectItem itemValue="#{null}" itemLabel="" />
                                <f:selectItems value="#{testBean.listAvailableStrings}"
                                    var="thingSOM" itemValue="#{thingSOM}" itemLabel="#{thingSOM}"></f:selectItems>
                            </p:selectOneMenu>
                        </p:column>

                    </p:row>

                </p:panelGrid>

                <p:spacer width="1" height="250"
                    style="position: relative; bottom: -5px; top: -10px; background-color: #A8A8A8; margin-left: 20px; margin-right: 20px" />


                <p:panelGrid id="panel2_3">
                    <p:row>
                        <p:column colspan="2">
                            <p:outputLabel value="#{testBean.selectedString}"></p:outputLabel>
                        </p:column>
                    </p:row>
                </p:panelGrid>
            </p:panelGrid>
        </p:panelGrid>
    </h:form>

使用バージョン:

• モハラ 2.2.13
• プライムフェイス 6.0
• Payara 4.1.1 #163
• CODI 1.0.6
• 溶接 2.3.5
• JSF2.1

最初のバージョンが間違っている理由を誰か説明してください。今後の開発のためにそれを考慮に入れることができます。

ありがとうございました