Does inputtextarea trigger any event after a suggestion is clicked? - jsf

Question

I have an inputtextarea which calls a completeMethod after a query is entered... that is working fine and the suggestions are displaying, but I woul'd need to catch the ajax event in order to know which suggestion the user has picked. Is it possible?

Answer 1

You are trying to use the ajax itemSelect event like so:
<h:form>
<p:inputTextarea widgetVar="textarea" completeMethod="#{myBean.complete}">
<p:ajax event="itemSelect" listener="#{myBean.onSelect}" />
</p:inputTextarea>
</h:form>
Managed bean methods:
public List<String> complete(String filter) {
List<String> result = new ArrayList<String>();
for (int i = 0; i < 10; i++)
result.add(filter + i);
return result;
}
public void onSelect(SelectEvent<String> e) {
System.out.println(e.getObject());
}
This does not work in Primefaces 7.0 (and probably earlier) because the renderer of the inputTextarea fails to add the clientBehavior configuration which is fixed as of Version 7.1.
In the browser javascript console input:
PF('textarea').cfg.behaviors
> undefined
The result undefined indicates missing client behavior configuration.
You can work around this by overriding the InputTextareaRenderer.encodeScript() method:
package my.package;
import java.io.IOException;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import org.primefaces.component.inputtextarea.InputTextarea;
import org.primefaces.component.inputtextarea.InputTextareaRenderer;
import org.primefaces.expression.SearchExpressionFacade;
import org.primefaces.util.WidgetBuilder;
public class CustomInputTextareaRenderer extends InputTextareaRenderer {
#Override
protected void encodeScript(FacesContext context, InputTextarea inputTextarea) throws IOException {
String clientId = inputTextarea.getClientId(context);
boolean autoResize = inputTextarea.isAutoResize();
String counter = inputTextarea.getCounter();
WidgetBuilder wb = getWidgetBuilder(context);
wb.init("InputTextarea", inputTextarea.resolveWidgetVar(), clientId).attr("autoResize", autoResize)
.attr("maxlength", inputTextarea.getMaxlength(), Integer.MAX_VALUE);
if (counter != null) {
UIComponent counterComponent = SearchExpressionFacade.resolveComponent(context, inputTextarea, counter);
wb.attr("counter", counterComponent.getClientId(context)).attr("counterTemplate",
inputTextarea.getCounterTemplate(), null);
}
if (inputTextarea.getCompleteMethod() != null) {
wb.attr("autoComplete", true).attr("minQueryLength", inputTextarea.getMinQueryLength())
.attr("queryDelay", inputTextarea.getQueryDelay())
.attr("scrollHeight", inputTextarea.getScrollHeight(), Integer.MAX_VALUE);
}
// additional line enabling AJAX 'itemSelect' event handling.
encodeClientBehaviors(context, inputTextarea);
wb.finish();
}
}
In faces config, add the renderer:
<faces-config>
...
<render-kit>
<renderer>
<component-family>org.primefaces.component</component-family>
<renderer-type>org.primefaces.component.InputTextareaRenderer</renderer-type>
<renderer-class>my.package.CustomInputTextareaRenderer</renderer-class>
</renderer>
</render-kit>
</faces-config>
Quick indication that it works in javascript console:
PF('textarea').cfg.behaviors
> Object { itemSelect: itemSelect() }