feat: Focus first match on search

src/index.js

@@ -146,17 +146,25 @@ class DropdownTreeSelect extends Component {
   }
 
   onInputChange = value => {
-    const { allNodesHidden, tree } = this.treeManager.filterTree(
+    const { allNodesHidden, tree, matches } = this.treeManager.filterTree(
       value,
       this.props.keepTreeOnSearch,
       this.props.keepChildrenOnSearch
     )
     const searchModeOn = value.length > 0
 
+    const { currentFocus } = this.state
+    if (!allNodesHidden && !matches.includes(currentFocus)) {
+      const currentFocusNode = currentFocus && this.treeManager.getNodeById(currentFocus)
+      const firstMatchNode = this.treeManager.getNodeById(matches[0])
+      keyboardNavigation.adjustFocusedProps(currentFocusNode, firstMatchNode)
+    }
+
     this.setState({
       tree,
       searchModeOn,
       allNodesHidden,
+      currentFocus: !allNodesHidden && !matches.includes(currentFocus) ? matches[0] : currentFocus,
     })
   }
 

src/index.keyboardNav.test.js

@@ -97,18 +97,44 @@ test('can collapse on keyboardNavigation', t => {
   t.false(wrapper.find('#c3').exists())
 })
 
+test('should set focus to first match on search', t => {
+  const wrapper = mount(<DropdownTreeSelect data={tree} showDropdown="always" />)
+  wrapper.instance().onInputChange('bb')
+  triggerOnKeyboardKeyDown(wrapper, ['b'])
+  t.deepEqual(wrapper.find('li.focused').text(), 'bbb 1')
+})
+
+test('remembers current focus on search clear', t => {
+  const wrapper = mount(<DropdownTreeSelect data={tree} />)
+  wrapper.instance().onInputChange('bb')
+  triggerOnKeyboardKeyDown(wrapper, ['b'])
+  t.deepEqual(wrapper.find('li.focused').text(), 'bbb 1')
+  triggerOnKeyboardKeyDown(wrapper, ['Backspace', 'Backspace', 'Backspace'])
+  t.deepEqual(wrapper.find('li.focused').text(), 'bbb 1')
+})
+
+test('should set focus on subsequent searches', t => {
+  const wrapper = mount(<DropdownTreeSelect data={tree} />)
+  wrapper.instance().onInputChange('bb')
+  triggerOnKeyboardKeyDown(wrapper, ['b'])
+  t.deepEqual(wrapper.find('li.focused').text(), 'bbb 1')
+  wrapper.instance().onInputChange('aa')
+  triggerOnKeyboardKeyDown(wrapper, ['a'])
+  t.deepEqual(wrapper.find('li.focused').text(), 'aaa 1')
+})
+
 test('can navigate searchresult on keyboardNavigation', t => {
   const wrapper = mount(<DropdownTreeSelect data={tree} showDropdown="initial" />)
   wrapper.instance().onInputChange('bb')
   triggerOnKeyboardKeyDown(wrapper, ['b', 'ArrowDown', 'ArrowDown', 'ArrowDown'])
-  t.deepEqual(wrapper.find('li.focused').text(), 'bbb 1')
+  t.deepEqual(wrapper.find('li.focused').text(), 'bbb 2')
 })
 
 test('can navigate with keepTreOnSearch on keyboardNavigation', t => {
   const wrapper = mount(<DropdownTreeSelect data={tree} keepTreeOnSearch />)
   wrapper.instance().onInputChange('bb')
   triggerOnKeyboardKeyDown(wrapper, ['b', 'ArrowDown', 'ArrowDown', 'ArrowDown'])
-  t.deepEqual(wrapper.find('li.focused').text(), 'bbb 1')
+  t.deepEqual(wrapper.find('li.focused').text(), 'bbb 2')
   t.true(wrapper.find('#c1').exists())
 })
 

src/tree-manager/index.js

@@ -117,7 +117,7 @@ class TreeManager {
     // this is the least intrusive way of fixing #190
     this.matchTree = matchTree
 
-    return { allNodesHidden, tree: matchTree }
+    return { allNodesHidden, tree: matchTree, matches }
   }
 
   restoreNodes() {