Avoid scroll-up JSF primefaces selectCheckboxMenu component after change label

Question

When we select an option of a primefaces selectCheckboxMenu using scroll down, after change listener, the component is updated and scroll go to the up and this behavior seems wrong.

This is my code:

XHTML

<p:outputLabel for="profCat" value="Professional Category" />

<p:selectCheckboxMenu id="profCat" widgetVar="profCatW" 
    scrollHeight="175"
    label="#{employeeForm.profCat.label}"
    value="#{employeeForm.profCat.selectedItemIds}">

    <p:ajax event="toggleSelect" update="profCat"
        listener="#{employeeForm.profCat.populateLabel}"
        oncomplete="PF('profCatW').show()" />
    <p:ajax event="change" update="profCat"
        listener="#{employeeForm.profCat.populateLabel}"
        oncomplete="PF('profCatW').show()" />
    <f:selectItems value="#{employeeForm.profCat.items}" var="label" 
        itemLabel="#{label.label}" itemValue="#{label.optionId}" />
</p:selectCheckboxMenu>

<p:message for="profCat" />

Java Listener

public void populateLabel() {
        label = (selectedItemIds != null && selectedItemIds.size() > 0)
                ? selectedItemIds.size() + " selected." : "Select";
}

The java listener change label value but we need to update the selectCheckboxMenu to refresh the label of this combo.

Anybody know any solution to solve?

1. Javascript scroll re-position after update
2. Any way to avoid to refresh scroll?
3. Any way to update combo label without update component?
4. Other component of other JSF library?

My B plan is update from Java code the text of associated outputLabel to avoid this behavior.

Thank you so much in advance!

Regards

Answer 1

Finally, I solved this problem with the help of @Kukeltje.

I defined this javascript function:

function populateLabel(widgetVar) {
      var count = PF(widgetVar).inputs.filter(":checked").length;

      var label = count + " selected";      
      PF(widgetVar).jq.find('.ui-selectcheckboxmenu-label').text(label);
}

And in my JSF code I removed updates on ajax listeners:

<p:ajax event="toggleSelect"
    listener="#{employeeForm.profCat.populateLabel}"
    oncomplete="populateLabel('profCatW')" />
<p:ajax event="change" 
    listener="#{employeeForm.profCat.populateLabel}"
    oncomplete="populateLabel('profCatW')" />

To consider case of error during validation:

<h:outputScript rendered="#{facesContext.validationFailed}">
   populateLabel('profCatW');
</h:outputScript>