output panel won't update inside dataScroller

Question

I have a simple example (more or less from prime faces demo site) where a selectCheckboxMenu and an outputPanel is nested inside a dataScroller (see code snippet below). When a city is selected from selectCheckboxMenu then the outputPanel shoud display it. Hower this does not work. As far as I can see, everything is executed correctly, so I have no idea why it is not working.

Any help here?

p.s. when it is not nested inside dataScroller then everything works just fine.

    <h:form id="vehiclesForm">
        <p:log id="log" />

        <p:dataScroller id="vehicles" value="#{vehicleTableBean.vehicles}" var="vehicle" chunkSize="10" mode="inline" scrollHeight="700">

            <h:panelGrid columns="3" cellpadding="5">
                <p:selectCheckboxMenu value="#{checkboxView.selectedCities}" label="Cities"
                                      filter="true" filterMatchMode="startsWith" panelStyle="width:250px">
                    <f:selectItems value="#{checkboxView.cities}" />
                </p:selectCheckboxMenu>
            <p:commandLink id="submit" value="Submit" update="@(.cities)"/>
            </h:panelGrid>

            <p:outputPanel style="width:250px;padding-left:5px;margin-top:10px">
                <p:dataList styleClass="cities" value="#{checkboxView.selectedCities}" var="city" emptyMessage="No cities selected">
                    #{city}
                </p:dataList>
            </p:outputPanel>

        </p:dataScroller>

    </h:form>

One interesting point, I have found out meanwhile:

when there is only one item in the dataScroller, then there are no problems, everything works like a charm.