Fix primefaces#8113: Table filters now HTML5 search type

melloware · Jan 4, 2024 · f44f3e9 · f44f3e9
1 parent 7daf546
commit f44f3e9
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 2 deletions.
diff --git a/primefaces/src/main/java/org/primefaces/component/datatable/DataTableRenderer.java b/primefaces/src/main/java/org/primefaces/component/datatable/DataTableRenderer.java
@@ -792,6 +792,7 @@ protected void encodeFilterInput(UIColumn column, ResponseWriter writer, boolean
         writer.startElement("input", null);
         writer.writeAttribute("id", filterId, null);
         writer.writeAttribute("name", filterId, null);
+        writer.writeAttribute("type", "search", null);
         writer.writeAttribute("class", filterStyleClass, null);
         writer.writeAttribute("value", filterValue, null);
         writer.writeAttribute("autocomplete", "off", null);

diff --git a/primefaces/src/main/java/org/primefaces/component/treetable/TreeTableRenderer.java b/primefaces/src/main/java/org/primefaces/component/treetable/TreeTableRenderer.java
@@ -763,6 +763,7 @@ protected void encodeFilter(FacesContext context, TreeTable tt, UIColumn column)
             writer.startElement("input", null);
             writer.writeAttribute("id", filterId, null);
             writer.writeAttribute("name", filterId, null);
+            writer.writeAttribute("type", "search", null);
             writer.writeAttribute("class", filterStyleClass, null);
             writer.writeAttribute("value", filterValue, null);
             writer.writeAttribute("autocomplete", "off", null);

diff --git a/primefaces/src/main/resources/META-INF/resources/primefaces/datatable/datatable.js b/primefaces/src/main/resources/META-INF/resources/primefaces/datatable/datatable.js
@@ -668,7 +668,7 @@ PrimeFaces.widget.DataTable = PrimeFaces.widget.DeferredWidget.extend({
         filterColumns.children('.ui-column-filter').each(function() {
             var filter = $(this);
 
-            if(filter.is('input:text')) {
+            if(filter.is("input[type='search']")) {
                 PrimeFaces.skinInput(filter);
                 $this.bindTextFilter(filter);
             }
@@ -702,6 +702,9 @@ PrimeFaces.widget.DataTable = PrimeFaces.widget.DeferredWidget.extend({
         else
             this.bindFilterEvent(filter);
 
+        // #8113 clear 'x' event handler
+        this.bindClearFilterEvent(filter);
+
         // #7562 draggable columns cannot be filtered with touch
         if (PrimeFaces.env.isTouchable(this.cfg)) {
             filter.on('touchstart', function(e) {
@@ -743,6 +746,22 @@ PrimeFaces.widget.DataTable = PrimeFaces.widget.DeferredWidget.extend({
         });
     },
 
+    /**
+     * Sets up the 'search' event which for HTML5 text search fields handles the clear 'x' button.
+     * @private
+     * @param {JQuery} filter INPUT element of the text filter.
+     */
+    bindClearFilterEvent: function(filter) {
+        var $this = this;
+
+        filter.off('search').on('search', function(e) {
+            // only care when 'X'' is clicked
+            if ($(this).val() == "") {
+                $this.filter();
+            }
+        });
+    },
+
     /**
      * Sets up all event listeners for the given filter element of a column filter.
      * @private

diff --git a/primefaces/src/main/resources/META-INF/resources/primefaces/treetable/treetable.js b/primefaces/src/main/resources/META-INF/resources/primefaces/treetable/treetable.js
@@ -249,7 +249,7 @@ PrimeFaces.widget.TreeTable = PrimeFaces.widget.DeferredWidget.extend({
         filterColumns.children('.ui-column-filter').each(function() {
             var filter = $(this);
 
-            if(filter.is('input:text')) {
+            if(filter.is("input[type='search']")) {
                 PrimeFaces.skinInput(filter);
                 $this.bindTextFilter(filter);
             }
@@ -307,6 +307,9 @@ PrimeFaces.widget.TreeTable = PrimeFaces.widget.DeferredWidget.extend({
         else
             this.bindFilterEvent(filter);
 
+        // #8113 clear 'x' event handler
+        this.bindClearFilterEvent(filter);
+
         // #7562 draggable columns cannot be filtered with touch
         if (PrimeFaces.env.isTouchable(this.cfg)) {
             filter.on('touchstart', function(e) {
@@ -346,6 +349,22 @@ PrimeFaces.widget.TreeTable = PrimeFaces.widget.DeferredWidget.extend({
         });
     },
 
+    /**
+     * Sets up the 'search' event which for HTML5 text search fields handles the clear 'x' button.
+     * @private
+     * @param {JQuery} filter INPUT element of the text filter.
+     */
+    bindClearFilterEvent: function(filter) {
+        var $this = this;
+
+        filter.off('search').on('search', function(e) {
+            // only care when 'X'' is clicked
+            if ($(this).val() == "") {
+                $this.filter();
+            }
+        });
+    },
+
     /**
      * Sets up the event listeners required for filtering this tree table.
      * @private