ajaxprimefacesdatatableglobal-filter

Datatable Global Filter - Unexpected Behavior


I have a globalfilter in a Datatable to work when the user hit Enter:

It filters as expected. But, strangely, after the datatable is filtered, a createForm, inside a p:dialog, is displayed too, which it is not expected; this createForm is, and should, be displayed only when the user clicks in the createButton that evokes it.

Above, code excerpts related to the components.

The createButton and the Datatable:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">

<h:form id="DemandasListForm">

<p:panel id="PanelListForm">

<p:commandButton id="createButton" icon="fa fa-plus-square" value="#{adeBundle.CreateDemanda}" update=":DemandasCreateForm" oncomplete="PF('DemandasCreateDialog').show()" actionListener="#{demandasController.prepareCreate}"  />

<f:facet name="header">
    <p:outputPanel style="text-align: right">
        <p:inputText id="globalFilter" onkeypress="if (event.keyCode === 13) {PF('demandasTable').filter();}" placeholder="Type something and press ENTER." />
    </p:outputPanel>
</f:facet>

<p:dataTable id="datalist"
value="#{demandasController.items}"
lazy="false"
rowKey="#{item.id}"
var="item"
paginator="true"
paginatorPosition="bottom"
selectionMode="single"
selection="#{demandasController.selected}"
filteredValue="#{demandasController.filteredDemandas}"
filterDelay="1000" <!-- doesn't work for globalfilter, only for the columns-->
widgetVar="demandasTable">
...
</p:dataTable>

The dialog:

<ui:composition>
  <p:dialog id="DemandasCreateDlg" widgetVar="DemandasCreateDialog" modal="true" appendTo="@(body)" closeOnEscape="true">
    <h:form id="DemandasCreateForm">
...

Does anyone knows how can I fix this ?

Thanks in advance.


Solution

  • Can try to return false like this..

    onkeypress="if (event.keyCode === 13) {PF('demandasTable').filter(); return false;}"
    

    That will break out after the filter method is called and not let the ENTER key propagate. What I think is happening is the ENTER key is submitting the first button on the form which is your Command Button to open the dialog. Default browser behavior is to submit the first button it finds on a form when you press ENTER.