How to let JSF pass through HTML attributes
html, jsf, jsf-2, primefaces, servlet-3.0
Solution
JSF by design ignores all custom attributes when rendering HTML.
If you're already on JSF 2.2+, simply specify it as passthrough attribute:
<html ... xmlns:a="http://xmlns.jcp.org/jsf/passthrough">
...
<p:autoComplete a:x-webkit-speech="x-webkit-speech" ... />
If you're not on JSF 2.2 yet, then you need a custom renderer. This is in case of PrimeFaces `<p:autoComplete>` (and all other components) fortunately relatively simple. It's sufficient to override just the `renderPassThruAttributes()` method wherein you add the new attribute which you'd like to render to the `attrs` argument and finally delegate to the super method.
E.g.
package com.example;
import java.io.IOException;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import org.primefaces.component.autocomplete.AutoCompleteRenderer;
public class MyAutoCompleteRenderer extends AutoCompleteRenderer {
@Override
protected void renderPassThruAttributes(FacesContext facesContext, UIComponent component, String[] attrs) throws IOException {
String[] newAttrs = new String[attrs.length + 1];
System.arraycopy(attrs, 0, newAttrs, 0, attrs.length);
newAttrs[attrs.length] = "x-webkit-speech";
super.renderPassThruAttributes(facesContext, component, newAttrs);
}
}
To get it to run, register it as follows in your webapp's `faces-config.xml`:
<render-kit>
<renderer>
<component-family>org.primefaces.component</component-family>
<renderer-type>org.primefaces.component.AutoCompleteRenderer</renderer-type>
<renderer-class>com.example.MyAutoCompleteRenderer</renderer-class>
</renderer>
</render-kit>
(you can find out the component family and renderer type by looking at the source code of `AutoComplete` class, they're specified as `COMPONENT_FAMILY` and `RENDERER_TYPE` constants in there)
No, the `@FacesRenderer` annotation simply won't work when the purpose is to override custom renderers which are by itselves already registered in a `faces-config.xml`.
Problem
I am using Primefaces 3 in JSF 2 to make a search box. I need to add a non-standard attribute (x-webkit-speech) to the control so you would have something like this... ``` <p:autoComplete x-webkit-speech="x-webkit-speech" ... /> ``` Since this attribute isn't part of the autoComplete control JSF gives me a 500 error. But when I remove it, the page renders fine. In general, how do you specify pass through attributes on a JSF tag so they are ignored?