AutoFill PrimeFaces: itemSelect and change events

Question

I need to call an ajax update after changing the text field, which is the <p:autoComplete> component. I noticed that if the user prefers to enter text manually, the event is a change, whereas if the user clicks on one of the suggestions for autocompletion, the event is itemSelect. Therefore, I added two <p:ajax> children to the input, each of which calls the same method and has the same list of updates, but one has event="change" and the other event="itemSelect" .

However, now I am discovering something strange. For example, in normal server mode, I opened my page and typed "12". Autofill suggested "1233" and "1234" as suggestions. I hit 1233 and nothing seemed to happen. I clicked again and everything else filled.

Repeat this in the debugger with a breakpoint in the event handler, and I see that after the first click the value is "12", and the second time it becomes "1233".

By switching the comments of two different <p:ajax> , I see different consequences. Without a "change", a handler is never called if the user selects an autocomplete sentence, and without "itemSelect", one handler is never called if the user types manually. But with both of them there are two challenges, and I'm sure there will be complaints about a double click.

Some pseudo codes for those who like, first xhtml:

 <p:autoComplete id="itemId" value="#{myBacker.myBean.itemNumber}" required="true" completeMethod="#{myBacker.idAutoComplete}"> <p:ajax event="itemSelect" update="beanDetails" listener="#{myBacker.idChangeEventListener()}" /> <p:ajax event="change" update="beanDetails" listener="#{myBacker.idChangeEventListener()}" /> </p:autoComplete> <h:panelGroup id="beanDetails"> <h:panelGroup rendered="#{not empty myBacker.myBean.institutionName}"> <h:outputText value="#{myBacker.myBean.institutionName}" /> <!-- Continues with address, phone, etc.. --> </h:panelGroup> </h:panelGroup> 

Then the Java bean support code:

 public void idChangeEventListener() { myBean = myDAO.getDetails(myBean); // another couple of init-type method calls } 

Answer 1

Give the parent tag the widgetVar attribute, and then add this small attribute to the <p:ajax event="change" ...> :

 onstart="if(widgetVarName.panel.is(':visible')) return false;" 

When the question was written, we were on PrimeFaces version 3.5, if I remember correctly. Since then, we need to update the solution to:

 onstart="if(PF('widgetVarName').panel.is(':visible')) return false;" 

thanks mwalter for indicating change.

Answer 2

This is because both the change event and the itemselect event are fired one after another, and the change event takes precedence over the itemSelect event.

Therefore, do not proceed to the change event if the autocomplete drop-down list is visible, i.e. add the following to the change event line to avoid triggering it, and fire only the item select event.

  onstart="if(PF('autoCompWidgy').panel ne null and PF('autoCompWidgy').panel.is(':visible')) return false;" /> 

An example of autocomplete is shown below:

 <p:autoComplete id="autoComplete" dropdown="true" value="#{reqdoc.documentType}" completeMethod="#{financeController.completeDocDesc}" forceSelection="true" rendered="#{empty reqdoc.documentKey}" widgetVar="autoCompWidgy"> <p:ajax event="itemSelect" listener="#{financeController.userAddedDocumentListener(reqdoc)}" process="@this" update="reqDoctable" /> <p:ajax event="change" listener="#{financeController.userAddedDocumentListener(reqdoc)}" process="@this" update="reqDoctable" onstart="if(PF('autoCompWidgy').panel ne null and PF('autoCompWidgy').panel.is(':visible')) return false;" /> </p:autoComplete>