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() {