diff --git a/src/index.js b/src/index.js index dc11f08d..b48ebea9 100644 --- a/src/index.js +++ b/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, }) } diff --git a/src/index.keyboardNav.test.js b/src/index.keyboardNav.test.js index 6334abb7..9d30f6ee 100644 --- a/src/index.keyboardNav.test.js +++ b/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() + 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() + 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() + 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() 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() 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()) }) diff --git a/src/tree-manager/index.js b/src/tree-manager/index.js index 65eb27bc..6590009a 100644 --- a/src/tree-manager/index.js +++ b/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() {