Prime faces p:keyFilter stops working when an ajax update happens on h:inputText. Please have a look at the following example.
Expected Behavior: p:keyFilter should allow only alphabets and numbers in inputText at any point of time.
Steps to reproduce:
1) Go directly to "Project Key" field and try entering special characters.. it will not allow.. the filter works this time.
2) Now go to "Project Name" field and then click on "Project Key". This time try entering special characters. It allows to enter. The filter does not work now.
Sample xhtml:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</h:head>
<h:form>
<h:outputText value="Project Name:"></h:outputText>
<h:inputText id="projectName" value="#{testBean.projectName}" >
<p:ajax event="blur" listener="#{testBean.updateKey()}" update="projectKey" process="@form"></p:ajax>
</h:inputText>
<br/>
<h:outputText value="Project Key:"></h:outputText>
<h:inputText id="projectKey" value="#{testBean.projectKey}" label="Project Key" size="29" maxlength="10">
</h:inputText>
<p:keyFilter for="projectKey" mask="alphanum" />
</h:form>
</html>
Sample Managed Bean:
import javax.faces.bean.ManagedBean;
import javax.persistence.Entity;
@ManagedBean(name="testBean")
@Entity
public class Test {
private String projectName;
private String projectKey;
public String getProjectName() {
return projectName;
}
public void setProjectName(String projectName) {
this.projectName = projectName;
}
public String getProjectKey() {
return projectKey;
}
public void setProjectKey(String projectKey) {
this.projectKey = projectKey;
}
public void updateKey()
{
if(projectName.equals("Shivani"))
{
projectKey = "SK";
}
}
}
The PrimeFaces keyfilter is applied when the keyFilter is 'rendered'. The way it is applied can be seen in the source of the keyfilter.js.
In the PrimeFaces showcase (and documentation) you'll see two examples:
<p:inputText id="text1" value="....">
<p:keyFilter regEx="/[ABC]/i"/>
</p:inputText>
<h:outputText value="KeyFilter with mask on a h:inputText"/>
<h:inputText id="text2" value="..."/>
<p:keyFilter for="text2" mask="num" />
One where the p:keyFilter
is nested and one where the for
attribute is used. The latter will not be automatically reapplied after an update of the input, but the former will.
If you do need the non-nested way, make sure you update both the input and the keyfilter by either explicitly updating both, or nesting them both in e.g. a h:panelgroup id="inputAndFilter"
and updating that.
<h:panelgroup id="inputAndFilter">
<h:inputText id="text2" value="..."/>
<p:keyFilter for="text2" mask="num" />
</ui:panelgroup>