Fixed #3388 - DataTable: Disable filter overlay panel when clicking outside

api-generator/components/datatable.js

@@ -137,6 +137,12 @@ const DataTableProps = [
         default: 'null',
         description: 'Layout of the filter elements, valid values are "row" and "menu".'
     },
+    {
+        name: 'filterOnOutsideClick',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to trigger filter apply when outside of the element is clicked.'
+    },
     {
         name: 'filterLocale',
         type: 'string',

components/datatable/ColumnFilter.vue

@@ -182,6 +182,10 @@ export default {
             type: Object,
             default: null
         },
+        filterOnOutsideClick: {
+            type: Boolean,
+            default: false
+        },
         filterMenuClass: {
             type: String,
             default: null
@@ -453,6 +457,7 @@ export default {
             if (!this.outsideClickListener) {
                 this.outsideClickListener = (event) => {
                     if (this.overlayVisible && !this.selfClick && this.isOutsideClicked(event.target)) {
+                        this.filterOnOutsideClick && this.applyFilter();
                         this.overlayVisible = false;
                     }
 

components/datatable/DataTable.d.ts

@@ -587,6 +587,11 @@ export interface DataTableProps {
      * Fields for global filter
      */
     globalFilterFields?: string[] | undefined;
+    /**
+     * Whether to trigger filter apply when outside of the element is clicked.
+     * Default value is false.
+     */
+    filterOnOutsideClick?: boolean | undefined;
     /**
      * Locale to use in filtering. The default locale is the host environment's current locale.
      */

components/datatable/DataTable.vue

@@ -49,6 +49,7 @@
                             :filters="d_filters"
                             :filtersStore="filters"
                             :filterDisplay="filterDisplay"
+                            :filterOnOutsideClick="filterOnOutsideClick"
                             :filterInputProps="filterInputProps"
                             @column-click="onColumnHeaderClick($event)"
                             @column-mousedown="onColumnHeaderMouseDown($event)"
@@ -505,6 +506,10 @@ export default {
             type: Boolean,
             default: false
         },
+        filterOnOutsideClick: {
+            type: Boolean,
+            default: false
+        },
         tableStyle: {
             type: null,
             default: null

components/datatable/HeaderCell.vue

@@ -36,6 +36,7 @@
                 :filters="filters"
                 :filtersStore="filtersStore"
                 :filterInputProps="filterInputProps"
+                :filterOnOutsideClick="filterOnOutsideClick"
                 @filter-change="$emit('filter-change', $event)"
                 @filter-apply="$emit('filter-apply')"
                 :filterMenuStyle="columnProp('filterMenuStyle')"
@@ -143,6 +144,10 @@ export default {
             type: Boolean,
             default: false
         },
+        filterOnOutsideClick: {
+            type: Boolean,
+            default: false
+        },
         filterInputProps: {
             type: null,
             default: null

components/datatable/TableHeader.vue

@@ -27,6 +27,7 @@
                         :filters="filters"
                         :filterDisplay="filterDisplay"
                         :filtersStore="filtersStore"
+                        :filterOnOutsideClick="filterOnOutsideClick"
                         :filterInputProps="filterInputProps"
                         @filter-change="$emit('filter-change', $event)"
                         @filter-apply="$emit('filter-apply')"
@@ -202,6 +203,10 @@ export default {
             type: Boolean,
             default: false
         },
+        filterOnOutsideClick: {
+            type: Boolean,
+            default: false
+        },
         filterInputProps: {
             type: null,
             default: null

pages/datatable/DataTableDoc.vue

@@ -2038,6 +2038,12 @@ export default {
                             <td>null</td>
                             <td>Layout of the filter elements, valid values are "row" and "menu".</td>
                         </tr>
+                        <tr>
+                            <td>filterOnOutsideClick</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>Whether to trigger filter apply when outside of the element is clicked.</td>
+                        </tr>
                         <tr>
                             <td>filterLocale</td>
                             <td>string</td>