From 5d3ecaee3b2ee93e291b6f247f8c1788fbc54892 Mon Sep 17 00:00:00 2001
From: Magnus Ellinge <magnus.ellinge@dom.se>
Date: Tue, 2 Apr 2019 13:18:17 +0200
Subject: [PATCH 1/2] fix: Trigger on*-events properly, only open for chars and
 whitelist

---
 src/index.js                  | 21 +++++----------------
 src/index.keyboardNav.test.js |  2 +-
 src/tree-manager/index.js     | 11 ++++-------
 3 files changed, 10 insertions(+), 24 deletions(-)

diff --git a/src/index.js b/src/index.js
index 8d191344..65a5a0e6 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,
@@ -187,27 +185,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
@@ -216,8 +206,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(<DropdownTreeSelect data={tree} enableKeyboardNavigation />)
     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 dbc107af..58f37e90 100644
--- a/src/tree-manager/index.js
+++ b/src/tree-manager/index.js
@@ -228,23 +228,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) {

From c67cd7d44232ddb89e1ab8ac58eadde69e6242e7 Mon Sep 17 00:00:00 2001
From: Magnus Ellinge <magnus.ellinge@dom.se>
Date: Tue, 2 Apr 2019 13:33:42 +0200
Subject: [PATCH 2/2] fix: Skip som aria in this branch

---
 src/tree-node/index.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/tree-node/index.js b/src/tree-node/index.js
index 6680b581..84db437d 100644
--- a/src/tree-node/index.js
+++ b/src/tree-node/index.js
@@ -91,14 +91,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 (
-      <li className={liCx} style={style} {...getDataset(dataset)} id={liId} ref={refSetter} aria-expanded={ariaExpanded} aria-level={ariaLevel}>
-        <Toggle isLeaf={leaf} expanded={expanded} id={_id} onNodeToggle={onNodeToggle} />
+      <li className={liCx} style={style} {...getDataset(dataset)} id={liId}>
+        <Toggle isLeaf={isLeaf(_children)} expanded={expanded} id={_id} onNodeToggle={onNodeToggle} />
         <NodeLabel
           title={title}
           label={label}