Fixed #2037 - Improve onFilterValueChange event on Tree

primefaces · May 13, 2021 · 7198da0 · 7198da0
1 parent b9c0622
commit 7198da0
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 11 deletions.
diff --git a/src/components/tree/Tree.d.ts b/src/components/tree/Tree.d.ts
@@ -78,6 +78,11 @@ interface TreeDragDropParams {
     dropIndex: number;
 }
 
+interface TreeFilterValueChangeParams {
+    originalEvent: React.FormEvent<HTMLInputElement>;
+    value: string;
+}
+
 export interface TreeProps {
     id?: string;
     value?: TreeNode[];
@@ -116,7 +121,7 @@ export interface TreeProps {
     onToggle?(e: TreeExpandedParams): void;
     onDragDrop?(e: TreeDragDropParams): void;
     onContextMenu?(e: TreeEventNodeParams): void;
-    onFilterValueChange?(e: React.FormEvent<HTMLInputElement>): void;
+    onFilterValueChange?(e: TreeFilterValueChangeParams): void;
 }
 
 export declare class Tree extends React.Component<TreeProps, any> {

diff --git a/src/components/tree/Tree.js b/src/components/tree/Tree.js
@@ -310,15 +310,18 @@ export class Tree extends Component {
         let filterValue = event.target.value;
 
         if (this.props.onFilterValueChange) {
-            this.props.onFilterValueChange(filterValue);
+            this.props.onFilterValueChange({
+                originalEvent: event,
+                value: filterValue
+            });
         }
         else {
             this.setState({ filterValue });
         }
     }
 
     filter(value) {
-        this.setState({ filterValue: value||'' }, this._filter);
+        this.setState({ filterValue: ObjectUtils.isNotEmpty(value) ? value : '' }, this._filter);
     }
 
     _filter() {
@@ -328,7 +331,7 @@ export class Tree extends Component {
 
         const filterValue = this.getFilterValue();
 
-        if (filterValue === '') {
+        if (ObjectUtils.isEmpty(filterValue)) {
             this.filteredNodes = this.props.value;
         }
         else {
@@ -442,11 +445,16 @@ export class Tree extends Component {
 
     renderFilter() {
         if (this.props.filter) {
-            return <div className="p-tree-filter-container">
-                <input type="text" autoComplete="off" className="p-tree-filter p-inputtext p-component" placeholder={this.props.filterPlaceholder}
-                    onKeyDown={this.onFilterInputKeyDown} onChange={this.onFilterInputChange} disabled={this.props.disabled} />
-                <span className="p-tree-filter-icon pi pi-search"></span>
-            </div>;
+            let filterValue = this.getFilterValue();
+            filterValue = ObjectUtils.isNotEmpty(filterValue) ? filterValue : '';
+
+            return (
+                <div className="p-tree-filter-container">
+                    <input type="text" value={filterValue} autoComplete="off" className="p-tree-filter p-inputtext p-component" placeholder={this.props.filterPlaceholder}
+                        onKeyDown={this.onFilterInputKeyDown} onChange={this.onFilterInputChange} disabled={this.props.disabled} />
+                    <span className="p-tree-filter-icon pi pi-search"></span>
+                </div>
+            );
         }
 
         return null;

diff --git a/src/components/utils/ObjectUtils.js b/src/components/utils/ObjectUtils.js
@@ -158,4 +158,16 @@ export default class ObjectUtils {
 
         return str;
     }
+
+    static isEmpty(value) {
+        return (
+            value === null || value === undefined || value === '' ||
+            (Array.isArray(value) && value.length === 0) ||
+            (typeof value === 'object' && Object.keys(value).length === 0)
+        );
+    }
+
+    static isNotEmpty(value) {
+        return !this.isEmpty(value);
+    }
 }
diff --git a/src/showcase/tree/TreeDoc.js b/src/showcase/tree/TreeDoc.js
@@ -935,8 +935,10 @@ export const TreeContextMenuDemo = () => {
                                     </tr>
                                     <tr>
                                         <td>onFilterValueChange</td>
-                                        <td>event: browser event</td>
-                                        <td>Callback to invoke when the filter value is changed.</td>
+                                        <td>event.originalEvent: Browser event <br/>
+                                            event.value: the filtered value <br/>
+                                        </td>
+                                        <td>Callback to invoke when filter value changes.</td>
                                     </tr>
                                 </tbody>
                             </table>