Primefaces KeyFilter: Not working after calling "ajax update" on h:inputText

Question

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";
        }
    }
}

offtopic: Don't make an entity ALSO a managed bean. Make it a propertie of a bean: https://stackoverflow.com/questions/10301363/jpa-entity-as-jsf-bean. — Kukeltje, Apr 18 '18 at 09:57

score 1 · Answer 1 · answered Jul 19 '18 at 20:10

This error was reported to PrimeFaces: https://github.com/primefaces/primefaces/issues/3596

The bug was in the Jquery KeyFilter Plugin itself here: https://github.com/akzhan/jquery-keyfilter/issues/7

The patch has been applied and will be in PrimeFaces 6.3 and higher.

Kukeltje · Accepted Answer · 2018-04-18T13:26:35.533

0

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>

edited Apr 18 '18 at 13:26

answered Apr 18 '18 at 10:09

Kukeltje

12,223
4
24
47

Thanks much. I tried explicity updatig the filter and input initially by giving separate Id to filter. But that did not work. Nesting them in ui-fragment works. – Shivani Bhansali Apr 18 '18 at 10:16
But in this case the updating of projectKey does not happen. As per the above code logic, if I enter "Shivani" in the Project Name then Project Key should be autopopulated by "SK". But that is not happening now after nesting it in ui:fragment – Shivani Bhansali Apr 18 '18 at 10:40
Hmmmm... I'd hoped you'd see that the value part is still needed in the inputtext... If you do have that, you have a different problem – Kukeltje Apr 18 '18 at 10:45
nesting the controls h:panelGroup instead of ui:fragment works – Shivani Bhansali Apr 18 '18 at 12:29
hmmm... weird... most like because it does not render anything it cannot be updated by the PF ajax... Let me check tonight...Can you try with an `f:ajax render="..."` and a `ui:fragment`? – Kukeltje Apr 18 '18 at 12:42
Ok thanks. Let me investigate. Will in the mean time 'edit' the answer to include this – Kukeltje Apr 18 '18 at 13:25

Primefaces KeyFilter: Not working after calling "ajax update" on h:inputText

2 Answers2