effect of enclosing panelGrid to selectonemenu

Question

I had a problem with a primefaces selectOneMenu and had it (accidentally) fixed. But I cant figure out why, cause all I have done to get it work is wrapping a panelGrid around all of my components. (I haven't touched the converter or the underlying bean)

Following a example to reproduce the behaviour:

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;
    }

}

Version of my xhtml where selectOneMenu is NOT working (selectedString is always 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>

Version of my xhtml where it IS working as intended: (selectedString represents the selection of 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>

Used Versions:

• Mojarra 2.2.13
• Primefaces 6.0
• Payara 4.1.1 #163
• CODI 1.0.6
• Weld 2.3.5
• JSF 2.1

Can anyone please explain me why the first version is wrong, so I can take that into account for further developments.

Thank you