leave edit event

lib/ui/grid/column.d.ts

@@ -50,14 +50,20 @@ export class GridColumn {
     static setEnabled(element: HTMLElement, enabled?: boolean): void;
 }
 
-export class GridInputColumn extends GridColumn { }
+export class GridInputColumn extends GridColumn {
+    static get editing(): boolean;
+}
 
 export class GridTextColumn extends GridInputColumn { }
 
-export class GridDropdownColumn extends GridColumn { }
+export class GridDropdownColumn extends GridColumn {
+    static leaveEdit(element: HTMLElement, container: HTMLElement): void;
+}
 
 export class GridCheckboxColumn extends GridColumn { }
 
 export class GridIconColumn extends GridColumn { }
 
-export class GridDateColumn extends GridColumn { }
+export class GridDateColumn extends GridColumn {
+    static formatDate(date: Date): string;
+}

lib/ui/grid/column.js

@@ -111,9 +111,18 @@ export class GridDropdownColumn extends GridColumn {
             wrapper
         });
         drop.onselected = trigger;
-        if (typeof col.onDropExpanded === 'function') {
-            drop.onexpanded = col.onDropExpanded.bind(col, it.values, drop);
-        }
+        drop.onexpanded = function () {
+            if (it.__editing == null) {
+                it.__editing = {
+                    [col.key]: true
+                }
+            } else {
+                it.__editing[col.key] = true;
+            }
+            if (typeof col.onDropExpanded === 'function') {
+                col.onDropExpanded.call(col, it.values, drop);
+            }
+        };
         return drop.create();
     }
 
@@ -201,6 +210,21 @@ export class GridDropdownColumn extends GridColumn {
         }
         drop.disabled = enabled === false;
     }
+
+    static leaveEdit(element, wrapper) {
+        wrapper.querySelectorAll('.ui-drop-box.active').forEach(e => {
+            if (e != null) {
+                e.classList.remove('active');
+            }
+        });
+        const drop = this._getDrop(element);
+        if (drop == null) {
+            return;
+        }
+        if (drop?.multiselect && typeof drop.oncollapsed === 'function') {
+            drop.oncollapsed();
+        }
+    }
 }
 
 export class GridCheckboxColumn extends GridColumn {

lib/ui/grid/grid.js

@@ -359,6 +359,24 @@ export class Grid {
     }
 
     reload(keep) {
+        const filtered = this.columns.some(c => c.filterValues != null);
+        if ((filtered ^ this._var.colAttrs.__filtered) === 1) {
+            this._var.colAttrs.__filtered = filtered;
+            const headers = this._var.refs.header.children;
+            for (let i = 0; i < this.columns.length; ++i) {
+                const ele = headers[i].querySelector('.filter');
+                if (ele == null) {
+                    continue;
+                }
+                if (this.columns[i].filterValues != null) {
+                    ele.classList.add('active');
+                } else {
+                    ele.classList.remove('active');
+                }
+            }
+            this._refreshSource();
+            return;
+        }
         let length = this._var.currentSource.length;
         if (this.extraRows > 0) {
             length += this.extraRows;
@@ -699,12 +717,6 @@ export class Grid {
                 row.classList.remove('selected');
             }
             // data
-            // const selectChanged = vals.__selected ^ selected;
-            // if (selected) {
-            //     vals.__selected = true;
-            // } else {
-            //     delete vals.__selected;
-            // }
             cols.forEach((col, j) => {
                 if (col.visible === false) {
                     return;
@@ -734,9 +746,14 @@ export class Grid {
                 const type = isCheckbox ? GridCheckboxColumn : this._var.colTypes[col.key] ?? GridColumn;
                 let element;
                 if (!isCheckbox && typeof type.createEdit === 'function') {
-                    if (vals.__editing?.[col.key] && type.editing) {
-                        val = type.getValue({ target: cell.children[0] }, col);
-                        this._onRowChanged(null, startIndex + i, col, val, cell, true);
+                    if (vals.__editing?.[col.key]) {
+                        if (typeof type.leaveEdit === 'function') {
+                            type.leaveEdit(cell.children[0], this._var.el);
+                        }
+                        if (type.editing) {
+                            val = type.getValue({ target: cell.children[0] }, col);
+                            this._onRowChanged(null, startIndex + i, col, val, cell, true);
+                        }
                     }
                     element = selected ?
                         type.createEdit(e => this._onRowChanged(e, startIndex + i, col, type.getValue(e, col), cell), col, this._var.el, vals) :
@@ -1184,7 +1201,7 @@ export class Grid {
                 reset.innerText = this.langs.reset;
                 reset.addEventListener('click', () => {
                     delete col.filterValues;
-                    this._var.colAttrs.__filtered = this.columns.some(c => col.filterValues != null)
+                    this._var.colAttrs.__filtered = this.columns.some(c => c.filterValues != null)
                     this._refreshSource();
                     if (typeof col.onFiltered === 'function') {
                         col.onFiltered.call(this, col);