fix: Empty dropdown while searching for deeper nodes 🐛 (#186)

* chore: Remove unused dep 🔥

* chore: Selected package upgrades ⚡

* fix: Filter hidden nodes so dropdown is not empty

* fix: Only return matched nodes

* chore: Babel upgrade due to deprecated presets ⚡

https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets

* fix: Revert Babel-7 craziness. Restore sanity

* chore: Update tests

* chore: Update docs bundle

* fix: Restore existing behavior

package.json

@@ -46,20 +46,20 @@
     "react-infinite-scroll-component": "^4.0.2"
   },
   "devDependencies": {
-    "@babel/plugin-syntax-jsx": "^7.0.0-beta.46",
-    "@babel/preset-stage-3": "^7.0.0-beta.46",
+    "@babel/plugin-syntax-jsx": "7.0.0-beta.46",
+    "@babel/preset-stage-3": "7.0.0-beta.46",
     "@commitlint/cli": "^7.0.0",
     "@commitlint/config-conventional": "^7.0.0",
-    "ava": "^1.0.0-beta.4",
-    "babel-core": "^6.24.1",
-    "babel-eslint": "^8.0.0",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-istanbul": "^4.1.3",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
+    "ava": "1.0.0-beta.4",
+    "babel-core": "6.24.1",
+    "babel-eslint": "8.0.0",
+    "babel-loader": "7.1.2",
+    "babel-plugin-istanbul": "4.1.3",
+    "babel-plugin-transform-class-properties": "6.24.1",
+    "babel-plugin-transform-react-remove-prop-types": "0.4.13",
+    "babel-preset-es2015": "6.24.1",
+    "babel-preset-react": "6.24.1",
+    "babel-preset-stage-0": "6.24.1",
     "commitizen": "^2.9.6",
     "conventional-changelog-cli": "^2.0.5",
     "coveralls": "^3.0.0",
@@ -94,7 +94,6 @@
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "react-story": "^0.0.10",
-    "release-it": "^7.6.1",
     "rimraf": "^2.6.1",
     "sinon": "^5.0.0",
     "style-loader": "^0.20.1",

src/index.js

@@ -112,7 +112,7 @@ class DropdownTreeSelect extends Component {
   }
 
   onInputChange = value => {
-    const { allNodesHidden, tree } = this.treeManager.filterTree(value)
+    const { allNodesHidden, tree } = this.treeManager.filterTree(value, this.props.keepTreeOnSearch)
     const searchModeOn = value.length > 0
 
     this.setState({

src/tree-manager/index.js

@@ -54,30 +54,33 @@ class TreeManager {
     return matches
   }
 
-  setChildMatchStatus(id) {
+  addParentsToTree(id, tree) {
     if (id !== undefined) {
       const node = this.getNodeById(id)
+      this.addParentsToTree(node._parent, tree)
+      node.hide = true
       node.matchInChildren = true
-      this.setChildMatchStatus(node._parent)
+      tree.set(id, node)
     }
   }
 
-  filterTree(searchTerm) {
+  filterTree(searchTerm, keepTreeOnSearch) {
     const matches = this.getMatches(searchTerm.toLowerCase())
 
-    this.tree.forEach(node => {
-      node.hide = true
-      node.matchInChildren = false
-    })
+    const matchTree = new Map()
 
     matches.forEach(m => {
       const node = this.getNodeById(m)
       node.hide = false
-      this.setChildMatchStatus(node._parent)
+      if (keepTreeOnSearch) {
+        // add parent nodes first or else the tree won't be rendered in correct hierarchy
+        this.addParentsToTree(node._parent, matchTree)
+      }
+      matchTree.set(m, node)
     })
 
     const allNodesHidden = matches.length === 0
-    return { allNodesHidden, tree: this.tree }
+    return { allNodesHidden, tree: matchTree }
   }
 
   restoreNodes() {

src/tree-manager/tests/index.test.js

@@ -333,10 +333,11 @@ test('should get matching nodes when searched', t => {
     ]
   }
   const manager = new TreeManager(tree)
-  const { allNodesHidden } = manager.filterTree('search')
+  const { allNodesHidden, tree: matchTree } = manager.filterTree('search')
   t.false(allNodesHidden)
   const nodes = ['i1', 'c1']
-  nodes.forEach(n => t.false(manager.getNodeById(n).hide))
+  nodes.forEach(n => t.not(matchTree.get(n), undefined))
+  t.is(matchTree.get('c2'), undefined)
 })
 
 test('should hide all nodes when search term is not found', t => {
@@ -362,8 +363,6 @@ test('should hide all nodes when search term is not found', t => {
   const manager = new TreeManager(tree)
   const { allNodesHidden } = manager.filterTree('bla-bla')
   t.true(allNodesHidden)
-  const nodes = ['i1', 'c1']
-  nodes.forEach(n => t.true(manager.getNodeById(n).hide))
 })
 
 test('should use cached results for subsequent searches', t => {
@@ -457,10 +456,11 @@ test('should get matching nodes with mixed case when searched', t => {
     ]
   }
   const manager = new TreeManager(tree)
-  const { allNodesHidden } = manager.filterTree('SearCH')
+  const { allNodesHidden, tree: matchTree } = manager.filterTree('SearCH')
   t.false(allNodesHidden)
   const nodes = ['i1', 'c1']
-  nodes.forEach(n => t.false(manager.getNodeById(n).hide))
+  nodes.forEach(n => t.not(matchTree.get(n), undefined))
+  t.is(matchTree.get('c2'), undefined)
 })
 
 test('should uncheck previous node in simple select mode', t => {