From fec26a71da74159ce9511602b576a60172830ceb Mon Sep 17 00:00:00 2001 From: miruskin Date: Thu, 7 May 2020 02:00:31 +0900 Subject: [PATCH 1/4] feat: Focus first match on search --- src/index.js | 10 +++++++++- src/tree-manager/index.js | 2 +- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index a7411347..e3ac106e 100644 --- a/src/index.js +++ b/src/index.js @@ -142,17 +142,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 (!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: matches.includes(currentFocus) ? currentFocus : matches[0], }) } diff --git a/src/tree-manager/index.js b/src/tree-manager/index.js index f3428a15..ab257d55 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() { From 44d067d34efeb1e7e83237a61ee6d439ef072731 Mon Sep 17 00:00:00 2001 From: miruskin Date: Mon, 11 May 2020 22:27:47 +0900 Subject: [PATCH 2/4] fix: Fixed focus issue when all nodes hidden --- src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index e3ac106e..d7e40933 100644 --- a/src/index.js +++ b/src/index.js @@ -150,7 +150,7 @@ class DropdownTreeSelect extends Component { const searchModeOn = value.length > 0 const { currentFocus } = this.state - if (!matches.includes(currentFocus)) { + if (!allNodesHidden && !matches.includes(currentFocus)) { const currentFocusNode = currentFocus && this.treeManager.getNodeById(currentFocus) const firstMatchNode = this.treeManager.getNodeById(matches[0]) keyboardNavigation.adjustFocusedProps(currentFocusNode, firstMatchNode) @@ -160,7 +160,7 @@ class DropdownTreeSelect extends Component { tree, searchModeOn, allNodesHidden, - currentFocus: matches.includes(currentFocus) ? currentFocus : matches[0], + currentFocus: !allNodesHidden && !matches.includes(currentFocus) ? matches[0] : currentFocus, }) } From 9ac7b10caef0d13236042846458fc30588befa85 Mon Sep 17 00:00:00 2001 From: miruskin Date: Thu, 21 May 2020 10:13:23 +0900 Subject: [PATCH 3/4] fix: Fixed current tests --- src/index.keyboardNav.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.keyboardNav.test.js b/src/index.keyboardNav.test.js index f484b908..2032f315 100644 --- a/src/index.keyboardNav.test.js +++ b/src/index.keyboardNav.test.js @@ -101,14 +101,14 @@ 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()) }) From 820ef39d290bc1bf8bcac4d71c1d194485175410 Mon Sep 17 00:00:00 2001 From: miruskin Date: Thu, 21 May 2020 10:14:24 +0900 Subject: [PATCH 4/4] fix: Added tests for focus --- src/index.keyboardNav.test.js | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/src/index.keyboardNav.test.js b/src/index.keyboardNav.test.js index 2032f315..3fa6cb01 100644 --- a/src/index.keyboardNav.test.js +++ b/src/index.keyboardNav.test.js @@ -97,6 +97,32 @@ 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')