Primefaces ajax SelectOneListBox scrollbar at desired position

Question

I have a scrollable SelectOneListBox with >50 items. When a new item is added-saved it is appended as the last row, which is outside the current viewable area. I need the listbox scroll automatically to the newly added row (which is selected).

The add-save button and the listbox are ajaxified. I am using Primefaces 5.0. How can I do this?

The JSF page code:

<p:commandButton title="Save" icon="ui-icon ui-icon-disk" >
  <p:ajax process="name desc @this"
  update="list msg"
  listener="#{bean.saveListener}"/>
</p:commandButton>

<p:selectOneListbox id="list" scrollHeight="120"
  value="#{bean.selectName}">
  <f:selectItems value="#{bean.data}" var="b" 
  itemLabel="#{b.desc}" itemValue="#{b.name}"/>
  <p:ajax process="@this" update="@this name desc msg"
  listener="#{bean.valueChanged}"/>         
</p:selectOneListbox>

Answer 1

I solved the issue with this:

Added this to the command button's p:ajax tag:

oncomplete="autoScroll()"

Included this script:

function autoScroll() {
  var scrollPos = 400;
  jQuery('#fm\\:list .ui-selectlistbox-listcontainer').animate( {scrollTop:scrollPos});
}

When I click the add-save button the new item gets added to the bottom of the list items and scrolls to the bottom of the list. The scroller moves to the specified scrollPos. As the added item to the list is the last row, I used a scroll position greater than required. This works.