Fix issue with filtering setting empty children arrays

Supersedes #202, #217, #445
Resolves #153, #196, #216

Co-authored-by: Damien Pellier <dpellier@users.noreply.github.com>
Co-authored-by: Jalal azimi <jalalazimi@gmail.com>
Co-authored-by: Phạm Tiến Thành Công <cong.pttc@gmail.com>

Author: 4 people

CHANGELOG.md

@@ -28,6 +28,7 @@
 #### Other
 
 * Drop support for React before v16.8
+* Fix various issues with the filtering example improperly rendering parents and child nodes (#153, #196, #216)
 
 ### Added
 

examples/src/js/FilterExample.jsx

@@ -57,21 +57,28 @@ class FilterExample extends Component {
     }
 
     filterNodes(filtered, node) {
-        const { filterText } = this.state;
-        const children = (node.children || []).reduce(this.filterNodes, []);
-
-        if (
+        if (this.nodeMatchesSearchString(node)) {
             // Node's label matches the search string
-            node.label.toLocaleLowerCase().indexOf(filterText.toLocaleLowerCase()) > -1 ||
-            // Or a children has a matching node
-            children.length
-        ) {
-            filtered.push({ ...node, children });
+            filtered.push(node);
+        } else {
+            // Find if any children match the search string or have descendants who do
+            const filteredChildren = (node.children || []).reduce(this.filterNodes, []);
+
+            // If so, render these children
+            if (filteredChildren.length > 0) {
+                filtered.push({ ...node, children: filteredChildren });
+            }
         }
 
         return filtered;
     }
 
+    nodeMatchesSearchString({ label }) {
+        const { filterText } = this.state;
+
+        return label.toLocaleLowerCase().indexOf(filterText.toLocaleLowerCase()) > -1;
+    }
+
     render() {
         const {
             checked,