diff --git a/src/index.js b/src/index.js index a2e6ee4b..8d68e295 100644 --- a/src/index.js +++ b/src/index.js @@ -25,7 +25,6 @@ class DropdownTreeSelect extends Component { clearSearchOnChange: PropTypes.bool, keepTreeOnSearch: PropTypes.bool, keepChildrenOnSearch: PropTypes.bool, - keepOpenOnSelect: PropTypes.bool, placeholderText: PropTypes.string, showDropdown: PropTypes.bool, className: PropTypes.string, @@ -35,7 +34,6 @@ class DropdownTreeSelect extends Component { onFocus: PropTypes.func, onBlur: PropTypes.func, simpleSelect: PropTypes.bool, - radioSelect: PropTypes.bool, noMatchesText: PropTypes.string, showPartiallySelected: PropTypes.bool, disabled: PropTypes.bool, @@ -185,27 +183,19 @@ class DropdownTreeSelect extends Component { } onKeyboardKeyDown = e => { - const { enableKeyboardNavigation, keepOpenOnSelect, simpleSelect, radioSelect } = this.props - if (!enableKeyboardNavigation) { return } + if (!this.props.enableKeyboardNavigation) { return } const { showDropdown, tags, searchModeOn } = this.state - const tm = this.treeManager - const singleSelect = simpleSelect || radioSelect - if (!showDropdown && (keyboardNavigation.isValidKey(e.key, false) || /\w/i.test(e.key))) { + if (!showDropdown && (keyboardNavigation.isValidKey(e.key, false) || /^\w$/i.test(e.key))) { // Triggers open of dropdown and retriggers event e.persist() this.handleClick(null, () => this.onKeyboardKeyDown(e)) if (/\w/i.test(e.key)) return } else if (showDropdown && keyboardNavigation.isValidKey(e.key, true)) { + const tm = this.treeManager const tree = searchModeOn ? tm.matchTree : tm.tree - if (tm.handleNavigationKey(tree, e.key, !searchModeOn)) { - this.setState({ tags: tm.getTags() }) - if (e.key === 'Enter' && singleSelect && !keepOpenOnSelect) { - this.keepDropdownActive = false - this.handleClick() - } - } + tm.handleNavigationKey(tree, e.key, !searchModeOn, this.onCheckboxChange, this.onNodeToggle, () => this.setState({})) } else if (showDropdown && ['Escape', 'Tab'].indexOf(e.key) > -1) { // Triggers close this.keepDropdownActive = false @@ -214,8 +204,7 @@ class DropdownTreeSelect extends Component { } else if (e.key === 'Backspace' && tags && tags.length && this.searchInput && this.searchInput.value.length === 0) { const lastTag = tags.pop() - tm.setNodeCheckedState(lastTag._id, false) - this.setState({ tags }) + this.onCheckboxChange(lastTag._id, false) } else { return } diff --git a/src/index.keyboardNav.test.js b/src/index.keyboardNav.test.js index 00290650..2c09ebf0 100644 --- a/src/index.keyboardNav.test.js +++ b/src/index.keyboardNav.test.js @@ -40,7 +40,7 @@ test('other key presses does not open dropdown on keyboardNavigation', t => { ['Enter', 'ArrowLeft', 'ArrowRight'].forEach(key => { const wrapper = mount() wrapper.find('.search').simulate('keyDown', { key }) - t.true(wrapper.state().showDropdown) + t.false(wrapper.state().showDropdown) }) }) diff --git a/src/tree-manager/index.js b/src/tree-manager/index.js index 1a84f5e2..82b75ba2 100644 --- a/src/tree-manager/index.js +++ b/src/tree-manager/index.js @@ -246,23 +246,20 @@ class TreeManager { }) } - handleNavigationKey(tree, key, markSubTreeOnNonExpanded) { + handleNavigationKey(tree, key, markSubTreeOnNonExpanded, onToggleChecked, onToggleExpanded, onChangeFocus) { const prevFocus = this.currentFocus && this.getNodeById(this.currentFocus) const action = keyboardNavigation.getAction(prevFocus, key) if (FocusActionNames.has(action)) { this.handleFocusNavigationkey(tree, action, prevFocus, markSubTreeOnNonExpanded) - return true + onChangeFocus() } if (action === NavActions.ToggleChecked && prevFocus) { - this.setNodeCheckedState(prevFocus._id, prevFocus.checked !== true) - return true + onToggleChecked(prevFocus._id, prevFocus.checked !== true) } if (action === NavActions.ToggleExpanded && prevFocus) { - this.toggleNodeExpandState(prevFocus._id) - return true + onToggleExpanded(prevFocus._id) } - return false } handleFocusNavigationkey(tree, action, prevFocus, markSubTreeOnNonExpanded) { diff --git a/src/tree-node/index.js b/src/tree-node/index.js index 837e0b38..b520eaa3 100644 --- a/src/tree-node/index.js +++ b/src/tree-node/index.js @@ -97,14 +97,10 @@ class TreeNode extends PureComponent { const style = keepTreeOnSearch || !searchModeOn ? { paddingLeft: `${(_depth || 0) * 20}px` } : {} const liId = `${_id}_li` - const leaf = isLeaf(_children) - const refSetter = ref => { this.node = ref } - const ariaExpanded = !leaf ? expanded === true : undefined - const ariaLevel = (_depth || 0) + 1 return ( -
  • - +
  • +