diff --git a/src/index.keyboardNav.test.js b/src/index.keyboardNav.test.js
new file mode 100644
index 00000000..86243e36
--- /dev/null
+++ b/src/index.keyboardNav.test.js
@@ -0,0 +1,163 @@
+import test from 'ava'
+import React from 'react'
+import { spy } from 'sinon'
+import { mount } from 'enzyme'
+import DropdownTreeSelect from './index'
+
+const node = (id, label) => ({ id, label, value: label })
+
+const tree = {
+ ...node('c1', 'ccc 1'),
+ children: [
+ {
+ ...node('c2', 'ccc 2'),
+ children: [node('a1', 'aaa 1'), node('a2', 'aaa 2')],
+ },
+ {
+ ...node('c3', 'ccc 3'),
+ children: [node('a3', 'aaa 3'), node('b1', 'bbb 1'), node('b2', 'bbb 2')],
+ },
+ ],
+}
+
+const triggerOnKeyboardKeyDown = (wrapper, keys) => {
+ const elements = [].concat(keys || [])
+ elements.forEach(key => wrapper.find('.search').simulate('keyDown', { key }))
+}
+
+test('some key presses opens dropdown on keyboardNavigation', t => {
+ ;['ArrowUp', 'ArrowDown', 'Home', 'PageUp', 'End', 'PageDown', 'a', 'B'].forEach(key => {
+ const wrapper = mount(
)
+ triggerOnKeyboardKeyDown(wrapper, key)
+ t.true(wrapper.state().showDropdown)
+ })
+})
+
+test('esc closes dropdown on keyboardNavigation', async t => {
+ const wrapper = mount(
)
+ triggerOnKeyboardKeyDown(wrapper, ['ArrowDown', 'Escape'])
+ const showDropdown = await new Promise(resolve =>
+ setTimeout(() => {
+ resolve(wrapper.state().showDropdown)
+ }, 1)
+ )
+ t.false(showDropdown)
+})
+
+test('other key presses does not open dropdown on keyboardNavigation', t => {
+ ;['Enter', 'ArrowLeft', 'ArrowRight'].forEach(key => {
+ const wrapper = mount(
)
+ triggerOnKeyboardKeyDown(wrapper, key)
+ t.false(wrapper.state().showDropdown)
+ })
+})
+
+test('can navigate and focus child on keyboardNavigation', t => {
+ const wrapper = mount(
)
+ triggerOnKeyboardKeyDown(wrapper, [
+ 'ArrowDown',
+ 'ArrowRight',
+ 'ArrowRight',
+ 'ArrowDown',
+ 'ArrowRight',
+ 'ArrowRight',
+ 'ArrowDown',
+ ])
+ t.deepEqual(wrapper.find('li.focused').text(), 'bbb 1')
+})
+
+test('can navigate circular on keyboardNavigation', t => {
+ const wrapper = mount(
)
+ triggerOnKeyboardKeyDown(wrapper, ['ArrowDown', 'ArrowRight', 'ArrowRight', 'ArrowDown', 'ArrowDown'])
+ t.deepEqual(wrapper.find('li.focused').text(), 'ccc 1')
+ triggerOnKeyboardKeyDown(wrapper, 'ArrowUp')
+ t.deepEqual(wrapper.find('li.focused').text(), 'ccc 3')
+})
+
+test('can navigate to edge on keyboardNavigation', t => {
+ const wrapper = mount(
)
+ triggerOnKeyboardKeyDown(wrapper, ['ArrowDown', 'ArrowRight', 'ArrowRight', 'ArrowRight'])
+ ;['PageDown', 'PageUp', 'End', 'Home'].forEach((key, index) => {
+ const expected = index % 2 === 0 ? 'ccc 3' : 'ccc 1'
+ triggerOnKeyboardKeyDown(wrapper, key)
+ t.deepEqual(wrapper.find('li.focused').text(), expected)
+ })
+})
+
+test('can collapse on keyboardNavigation', t => {
+ const wrapper = mount(
)
+ triggerOnKeyboardKeyDown(wrapper, ['ArrowDown', 'ArrowRight', 'ArrowRight', 'ArrowDown'])
+ t.deepEqual(wrapper.find('li.focused').text(), 'ccc 3')
+
+ triggerOnKeyboardKeyDown(wrapper, 'ArrowLeft')
+ t.deepEqual(wrapper.find('li.focused').text(), 'ccc 1')
+ t.true(wrapper.find('#c3').exists())
+
+ triggerOnKeyboardKeyDown(wrapper, 'ArrowLeft')
+ t.false(wrapper.find('#c3').exists())
+})
+
+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')
+})
+
+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.true(wrapper.find('#c1').exists())
+})
+
+test('can delete tags on empty search input with backspace on keyboardNavigation', t => {
+ const data = [{ ...node('a', 'a'), checked: true }, { ...node('b', 'b'), checked: true }]
+ const wrapper = mount(
)
+ wrapper.instance().searchInput.value = 'x'
+ triggerOnKeyboardKeyDown(wrapper, 'Backspace')
+ t.deepEqual(wrapper.state().tags.length, 2)
+
+ wrapper.instance().searchInput.value = ''
+ triggerOnKeyboardKeyDown(wrapper, 'Backspace')
+ t.deepEqual(wrapper.state().tags.length, 1)
+ triggerOnKeyboardKeyDown(wrapper, 'Backspace')
+ t.deepEqual(wrapper.state().tags.length, 0)
+})
+
+test('can select with enter on keyboardNavigation', t => {
+ const wrapper = mount(
)
+ triggerOnKeyboardKeyDown(wrapper, ['ArrowDown', 'ArrowDown', 'Enter'])
+ t.deepEqual(wrapper.state().tags.length, 1)
+})
+
+test('can delete tags with backspace/delete on keyboardNavigation', t => {
+ const data = [{ ...node('a', 'a'), checked: true }, { ...node('b', 'b'), checked: true }]
+ const wrapper = mount(
)
+ const event = {
+ type: 'keydown',
+ stopPropagation: spy(),
+ nativeEvent: { stopImmediatePropagation: spy() },
+ }
+ wrapper.find('#a_tag > .tag-remove').simulate('keyDown', { ...event, key: 'Backspace' })
+ t.deepEqual(wrapper.state().tags.length, 1)
+ wrapper.find('#b_tag > .tag-remove').simulate('keyUp', { ...event, key: 'Delete' })
+ t.deepEqual(wrapper.state().tags.length, 0)
+})
+
+test('remembers current focus between prop updates', t => {
+ const wrapper = mount(
)
+ t.false(wrapper.find('li.focused').exists())
+ triggerOnKeyboardKeyDown(wrapper, ['ArrowDown'])
+ t.deepEqual(wrapper.find('li.focused').text(), 'ccc 1')
+ wrapper.setProps({ data: tree })
+ wrapper.instance().handleClick()
+ t.deepEqual(wrapper.find('li.focused').text(), 'ccc 1')
+})
+
+test('should set current focus as selected on tab out for simpleSelect', t => {
+ const wrapper = mount(
)
+ triggerOnKeyboardKeyDown(wrapper, ['ArrowDown', 'ArrowRight', 'ArrowRight', 'Tab'])
+ t.deepEqual(wrapper.state().tags[0].label, 'ccc 1')
+})
diff --git a/src/index.test.js b/src/index.test.js
index 625549ad..fd620cb8 100644
--- a/src/index.test.js
+++ b/src/index.test.js
@@ -244,3 +244,17 @@ test('detects click outside when other dropdown instance', t => {
t.false(wrapper1.state().showDropdown)
})
+
+test('adds aria-labelledby when label contains # to search input', t => {
+ const { tree } = t.context
+ const wrapper = mount(
)
+ t.deepEqual(wrapper.find('.search').prop('aria-labelledby'), 'hello world')
+ t.deepEqual(wrapper.find('.search').prop('aria-label'), undefined)
+})
+
+test('adds aria-label when having label on search input', t => {
+ const { tree } = t.context
+ const wrapper = mount(
)
+ t.deepEqual(wrapper.find('.search').prop('aria-labelledby'), undefined)
+ t.deepEqual(wrapper.find('.search').prop('aria-label'), 'hello world')
+})
diff --git a/src/input/index.js b/src/input/index.js
index 32edf9bb..49d9c261 100644
--- a/src/input/index.js
+++ b/src/input/index.js
@@ -4,15 +4,23 @@ import cn from 'classnames/bind'
import Tag from '../tag'
import styles from './index.css'
import { getDataset, debounce } from '../utils'
+import { getAriaLabel } from '../a11y'
const cx = cn.bind(styles)
-const getTags = (tags = [], onDelete, readOnly, disabled) =>
+const getTags = (tags = [], onDelete, readOnly, disabled, labelRemove) =>
tags.map(tag => {
const { _id, label, tagClassName, dataset } = tag
return (
-
)
})
@@ -25,9 +33,13 @@ class Input extends PureComponent {
onFocus: PropTypes.func,
onBlur: PropTypes.func,
onTagRemove: PropTypes.func,
+ onKeyDown: PropTypes.func,
inputRef: PropTypes.func,
disabled: PropTypes.bool,
readOnly: PropTypes.bool,
+ activeDescendant: PropTypes.string,
+ label: PropTypes.string,
+ labelRemove: PropTypes.string,
}
constructor(props) {
@@ -50,11 +62,15 @@ class Input extends PureComponent {
onBlur,
disabled,
readOnly,
+ onKeyDown,
+ activeDescendant,
+ label,
+ labelRemove,
} = this.props
return (
diff --git a/src/tag/index.css b/src/tag/index.css
index 98395e88..e11f5231 100644
--- a/src/tag/index.css
+++ b/src/tag/index.css
@@ -4,6 +4,11 @@
padding: 2px 0 2px 2px;
border-radius: 2px;
display: inline-block;
+
+ &:focus-within {
+ background-color: #e9e9e9;
+ border-color: #a0a0a0;
+ }
}
.tag-remove {
@@ -19,4 +24,8 @@
&.disabled {
cursor: not-allowed;
}
+
+ &:focus {
+ color: #3c3c3c;
+ }
}
diff --git a/src/tag/index.js b/src/tag/index.js
index 34f24ac4..343c1f66 100644
--- a/src/tag/index.js
+++ b/src/tag/index.js
@@ -13,25 +13,52 @@ class Tag extends PureComponent {
onDelete: PropTypes.func,
readOnly: PropTypes.bool,
disabled: PropTypes.bool,
+ labelRemove: PropTypes.string,
}
handleClick = e => {
const { id, onDelete } = this.props
e.stopPropagation()
e.nativeEvent.stopImmediatePropagation()
- onDelete(id)
+ onDelete(id, (e.key || e.keyCode) !== undefined)
+ }
+
+ onKeyDown = e => {
+ if (e.key === 'Backspace') {
+ this.handleClick(e)
+ e.preventDefault()
+ }
+ }
+
+ onKeyUp = e => {
+ if (e.keyCode === 32 || ['Delete', 'Enter'].indexOf(e.key) > -1) {
+ this.handleClick(e)
+ e.preventDefault()
+ }
}
render() {
- const { label, readOnly, disabled } = this.props
+ const { id, label, labelRemove = 'Remove', readOnly, disabled } = this.props
+
+ const tagId = `${id}_tag`
+ const className = cx('tag-remove', { readOnly }, { disabled })
+ const isDisabled = readOnly || disabled
+ const onClick = !isDisabled ? this.handleClick : undefined
+ const onKeyDown = !isDisabled ? this.onKeyDown : undefined
+ const onKeyUp = !isDisabled ? this.onKeyUp : undefined
return (
-
+
{label}
x
diff --git a/src/tree-manager/index.js b/src/tree-manager/index.js
index 14f99a80..20416f1a 100644
--- a/src/tree-manager/index.js
+++ b/src/tree-manager/index.js
@@ -1,7 +1,8 @@
import getPartialState from './getPartialState'
-
import { isEmpty } from '../utils'
import flattenTree from './flatten-tree'
+import nodeVisitor from './nodeVisitor'
+import keyboardNavigation, { FocusActionNames } from './keyboardNavigation'
class TreeManager {
constructor({ data, simpleSelect, radioSelect, showPartiallySelected, hierarchical, rootPrefixId }) {
@@ -47,20 +48,17 @@ class TreeManager {
const matches = []
+ const addOnMatch = node => {
+ if (node.label.toLowerCase().indexOf(searchTerm) >= 0) {
+ matches.push(node._id)
+ }
+ }
+
if (closestMatch !== searchTerm) {
const superMatches = this.searchMaps.get(closestMatch)
- superMatches.forEach(key => {
- const node = this.getNodeById(key)
- if (node.label.toLowerCase().indexOf(searchTerm) >= 0) {
- matches.push(node._id)
- }
- })
+ superMatches.forEach(key => addOnMatch(this.getNodeById(key)))
} else {
- this.tree.forEach(node => {
- if (node.label.toLowerCase().indexOf(searchTerm) >= 0) {
- matches.push(node._id)
- }
- })
+ this.tree.forEach(addOnMatch)
}
this.searchMaps.set(searchTerm, matches)
@@ -235,43 +233,49 @@ class TreeManager {
}
}
- getTags() {
+ get tags() {
if (this.radioSelect || this.simpleSelect) {
- return this._getTagsForSingleSelect()
- }
-
- const tags = []
- const visited = {}
- const markSubTreeVisited = node => {
- visited[node._id] = true
- if (!isEmpty(node._children)) node._children.forEach(c => markSubTreeVisited(this.getNodeById(c)))
+ if (this.currentChecked) {
+ return [this.getNodeById(this.currentChecked)]
+ }
+ return []
}
- this.tree.forEach((node, key) => {
- if (visited[key]) return
-
- if (node.checked) {
- tags.push(node)
- } else {
- visited[key] = true
- }
+ return nodeVisitor.getNodesMatching(this.tree, (node, key, visited) => {
if (node.checked && !this.hierarchical) {
// Parent node, so no need to walk children
- markSubTreeVisited(node)
+ nodeVisitor.markSubTreeVisited(node, visited, id => this.getNodeById(id))
}
+ return node.checked
})
- return tags
}
getTreeAndTags() {
- return { tree: this.tree, tags: this.getTags() }
+ return { tree: this.tree, tags: this.tags }
}
- _getTagsForSingleSelect() {
- if (this.currentChecked) {
- return [this.getNodeById(this.currentChecked)]
+ handleNavigationKey(currentFocus, tree, key, readOnly, markSubTreeOnNonExpanded, onToggleChecked, onToggleExpanded) {
+ const prevFocus = currentFocus && this.getNodeById(currentFocus)
+ const getNodeById = id => this.getNodeById(id)
+ const action = keyboardNavigation.getAction(prevFocus, key)
+
+ if (FocusActionNames.has(action)) {
+ const newFocus = keyboardNavigation.handleFocusNavigationkey(
+ tree,
+ action,
+ prevFocus,
+ getNodeById,
+ markSubTreeOnNonExpanded
+ )
+ return newFocus
+ }
+
+ if (!prevFocus || !tree.has(prevFocus._id)) {
+ // No current focus or not visible
+ return currentFocus
}
- return []
+
+ return keyboardNavigation.handleToggleNavigationkey(action, prevFocus, readOnly, onToggleChecked, onToggleExpanded)
}
}
diff --git a/src/tree-manager/keyboardNavigation.js b/src/tree-manager/keyboardNavigation.js
new file mode 100644
index 00000000..9798456e
--- /dev/null
+++ b/src/tree-manager/keyboardNavigation.js
@@ -0,0 +1,190 @@
+import nodeVisitor from './nodeVisitor'
+
+const Keys = {
+ Up: 'ArrowUp',
+ Down: 'ArrowDown',
+ Left: 'ArrowLeft',
+ Right: 'ArrowRight',
+ Enter: 'Enter',
+ Home: 'Home',
+ PageUp: 'PageUp',
+ End: 'End',
+ PageDown: 'PageDown',
+}
+
+export const NavActions = {
+ None: 'None',
+ FocusPrevious: 'FocusPrevious',
+ FocusNext: 'FocusNext',
+ FocusParent: 'FocusParent',
+ FocusFirst: 'FocusFirst',
+ FocusLast: 'FocusLast',
+ ToggleExpanded: 'ToggleExpanded',
+ ToggleChecked: 'ToggleChecked',
+}
+
+export const FocusActionNames = new Set([
+ NavActions.FocusPrevious,
+ NavActions.FocusNext,
+ NavActions.FocusParent,
+ NavActions.FocusFirst,
+ NavActions.FocusLast,
+])
+
+const validTriggerOpenKeys = [Keys.Up, Keys.Down, Keys.Home, Keys.PageUp, Keys.End, Keys.PageDown]
+const validKeys = validTriggerOpenKeys.concat([Keys.Left, Keys.Right, Keys.Enter])
+
+const isValidKey = (key, isOpen) => {
+ const keysToCheck = isOpen ? validKeys : validTriggerOpenKeys
+ return keysToCheck.indexOf(key) > -1
+}
+
+const isMatchingEvent = (key, keys, currentFocus, nonFocusKey) =>
+ keys.indexOf(key) > -1 || (!currentFocus && key === nonFocusKey)
+
+const isFocusFirstEvent = (key, currentFocus) => isMatchingEvent(key, [Keys.Home, Keys.PageUp], currentFocus, Keys.Down)
+
+const isFocusLastEvent = (key, currentFocus) => isMatchingEvent(key, [Keys.End, Keys.PageDown], currentFocus, Keys.Up)
+
+const isReverseTraverseAction = action =>
+ isMatchingEvent(action, [NavActions.FocusPrevious, NavActions.FocusLast], true)
+
+const isEdgeTraverseAction = action => isMatchingEvent(action, [NavActions.FocusFirst, NavActions.FocusLast], true)
+
+const getLeftNavAction = (currentFocus, key) => {
+ if (!currentFocus || key !== Keys.Left) return NavActions.None
+
+ if (currentFocus.expanded === true) {
+ return NavActions.ToggleExpanded
+ }
+ if (currentFocus._parent) {
+ return NavActions.FocusParent
+ }
+
+ return NavActions.None
+}
+
+const getRightNavAction = (currentFocus, key) => {
+ if (!currentFocus || !currentFocus._children || key !== Keys.Right) {
+ return NavActions.None
+ }
+
+ return currentFocus.expanded !== true ? NavActions.ToggleExpanded : NavActions.FocusNext
+}
+
+const getRelativeAction = (currentFocus, key) => {
+ if (!currentFocus) return NavActions.None
+ switch (key) {
+ case Keys.Up:
+ return NavActions.FocusPrevious
+ case Keys.Down:
+ return NavActions.FocusNext
+ case Keys.Enter:
+ return NavActions.ToggleChecked
+ default:
+ return NavActions.None
+ }
+}
+
+const getAction = (currentFocus, key) => {
+ let action
+ if (key === Keys.Left) {
+ action = getLeftNavAction(currentFocus, key)
+ } else if (key === Keys.Right) {
+ action = getRightNavAction(currentFocus, key)
+ } else if (isFocusFirstEvent(key, currentFocus)) {
+ action = NavActions.FocusFirst
+ } else if (isFocusLastEvent(key, currentFocus)) {
+ action = NavActions.FocusLast
+ } else {
+ action = getRelativeAction(currentFocus, key)
+ }
+ return action
+}
+
+const getParentFocus = (prevFocus, getNodeById) =>
+ prevFocus && prevFocus._parent ? getNodeById(prevFocus._parent) : prevFocus
+
+const getRelativeNeighborsFocus = (sortedNodes, prevFocus) => {
+ const nextIndex = sortedNodes.indexOf(prevFocus) + 1
+ if (nextIndex % sortedNodes.length === 0) {
+ return sortedNodes[0]
+ }
+ return sortedNodes[nextIndex]
+}
+
+const getRelativeFocus = (sortedNodes, prevFocus, action) => {
+ if (!sortedNodes || sortedNodes.length === 0) {
+ return prevFocus
+ }
+
+ let focus = prevFocus
+ if (isEdgeTraverseAction(action)) {
+ ;[focus] = sortedNodes
+ } else if ([NavActions.FocusPrevious, NavActions.FocusNext].indexOf(action) > -1) {
+ focus = getRelativeNeighborsFocus(sortedNodes, prevFocus)
+ }
+ return focus
+}
+
+const getNextFocus = (tree, prevFocus, action, getNodeById, markSubTreeOnNonExpanded) => {
+ if (action === NavActions.FocusParent) {
+ return getParentFocus(prevFocus, getNodeById)
+ }
+ if (!FocusActionNames.has(action)) {
+ return prevFocus
+ }
+
+ let nodes = nodeVisitor.getVisibleNodes(tree, getNodeById, markSubTreeOnNonExpanded)
+ if (isReverseTraverseAction(action)) {
+ nodes = nodes.reverse()
+ }
+
+ return getRelativeFocus(nodes, prevFocus, action)
+}
+
+const getNextFocusAfterTagDelete = (deletedId, prevTags, tags, fallback) => {
+ // Sets new focus to next tag or returns fallback
+ let index = prevTags && prevTags.findIndex(t => t._id === deletedId)
+ if (index < 0 || !tags.length) return fallback
+
+ index = tags.length > index ? index : tags.length - 1
+ const newFocusId = tags[index]._id
+ const focusNode = document.getElementById(`${newFocusId}_tag`)
+ if (focusNode) {
+ return focusNode.firstElementChild || fallback
+ }
+ return fallback
+}
+
+const handleFocusNavigationkey = (tree, action, prevFocus, getNodeById, markSubTreeOnNonExpanded) => {
+ const newFocus = keyboardNavigation.getNextFocus(tree, prevFocus, action, getNodeById, markSubTreeOnNonExpanded)
+ if (prevFocus && newFocus && prevFocus._id !== newFocus._id) {
+ prevFocus._focused = false
+ }
+ if (newFocus) {
+ newFocus._focused = true
+ return newFocus._id
+ }
+ return prevFocus && prevFocus._id
+}
+
+const handleToggleNavigationkey = (action, prevFocus, readOnly, onToggleChecked, onToggleExpanded) => {
+ if (action === NavActions.ToggleChecked && !readOnly && !(prevFocus.readOnly || prevFocus.disabled)) {
+ onToggleChecked(prevFocus._id, prevFocus.checked !== true)
+ } else if (action === NavActions.ToggleExpanded) {
+ onToggleExpanded(prevFocus._id)
+ }
+ return prevFocus && prevFocus._id
+}
+
+const keyboardNavigation = {
+ isValidKey,
+ getAction,
+ getNextFocus,
+ getNextFocusAfterTagDelete,
+ handleFocusNavigationkey,
+ handleToggleNavigationkey,
+}
+
+export default keyboardNavigation
diff --git a/src/tree-manager/nodeVisitor.js b/src/tree-manager/nodeVisitor.js
new file mode 100644
index 00000000..7b36700c
--- /dev/null
+++ b/src/tree-manager/nodeVisitor.js
@@ -0,0 +1,40 @@
+import { isEmpty } from '../utils'
+
+const markSubTreeVisited = (node, visited, getItemById) => {
+ visited[node._id] = true
+ if (!isEmpty(node._children)) {
+ node._children.forEach(c => markSubTreeVisited(getItemById(c), visited, getItemById))
+ }
+}
+
+const getNodesMatching = (tree, nodePredicate) => {
+ const nodes = []
+ const visited = {}
+
+ tree.forEach((node, key) => {
+ if (visited[key]) return
+
+ if (nodePredicate(node, key, visited)) {
+ nodes.push(node)
+ }
+
+ visited[key] = true
+ })
+
+ return nodes
+}
+
+const getVisibleNodes = (tree, getItemById, markSubTreeOnNonExpanded) =>
+ getNodesMatching(tree, (node, key, visited) => {
+ if (markSubTreeOnNonExpanded && node._children && node._children.length && node.expanded !== true) {
+ markSubTreeVisited(node, visited, getItemById)
+ }
+ return !node.hide
+ })
+
+const nodeVisitor = {
+ getNodesMatching,
+ getVisibleNodes,
+ markSubTreeVisited,
+}
+export default nodeVisitor
diff --git a/src/tree-manager/tests/index.test.js b/src/tree-manager/tests/index.test.js
index 8be6a8d3..29acc514 100644
--- a/src/tree-manager/tests/index.test.js
+++ b/src/tree-manager/tests/index.test.js
@@ -96,7 +96,7 @@ test('should get tags based on children check state', t => {
],
}
const manager = new TreeManager({ data: tree })
- t.deepEqual(manager.getTags().map(t => t.label), ['l1c1'])
+ t.deepEqual(manager.tags.map(t => t.label), ['l1c1'])
})
test('should get tags based on parent check state', t => {
@@ -113,7 +113,7 @@ test('should get tags based on parent check state', t => {
],
}
const manager = new TreeManager({ data: tree })
- t.deepEqual(manager.getTags().map(t => t.label), ['l1'])
+ t.deepEqual(manager.tags.map(t => t.label), ['l1'])
})
test('should get tags based on multiple parent check state', t => {
@@ -142,7 +142,7 @@ test('should get tags based on multiple parent check state', t => {
},
]
const manager = new TreeManager({ data: tree })
- t.deepEqual(manager.getTags().map(t => t.label), ['l1', 'l2'])
+ t.deepEqual(manager.tags.map(t => t.label), ['l1', 'l2'])
})
test('should get tags based on multiple parent/child check state', t => {
@@ -171,7 +171,7 @@ test('should get tags based on multiple parent/child check state', t => {
},
]
const manager = new TreeManager({ data: tree })
- t.deepEqual(manager.getTags().map(t => t.label), ['l1', 'l2c2'])
+ t.deepEqual(manager.tags.map(t => t.label), ['l1', 'l2c2'])
})
test('should toggle children when checked', t => {
diff --git a/src/tree-node/index.css b/src/tree-node/index.css
index 4f5c7bb8..5e23d5b8 100644
--- a/src/tree-node/index.css
+++ b/src/tree-node/index.css
@@ -21,6 +21,10 @@
}
}
}
+
+ &.focused {
+ background-color: #f4f4f4;
+ }
}
.toggle {
diff --git a/src/tree-node/index.js b/src/tree-node/index.js
index 324fce7b..e76f807a 100644
--- a/src/tree-node/index.js
+++ b/src/tree-node/index.js
@@ -27,6 +27,7 @@ const getNodeCx = props => {
showPartiallySelected,
readOnly,
checked,
+ _focused: focused,
} = props
return cx(
@@ -41,6 +42,7 @@ const getNodeCx = props => {
partial: showPartiallySelected && partial,
readOnly,
checked,
+ focused,
},
className
)
@@ -102,8 +104,10 @@ class TreeNode extends PureComponent {
const liCx = getNodeCx(this.props)
const style = keepTreeOnSearch || !searchModeOn ? { paddingLeft: `${(_depth || 0) * 20}px` } : {}
+ const liId = `${_id}_li`
+
return (
-
+
{
label: 'item0-0-0',
value: 'value0-0-0',
className: 'cn0-0-0',
+ _children: [{ label: 'item0-0-1', value: 'value0-0-1' }, { label: 'item0-0-2', value: 'value0-0-2' }],
}
const onChange = spy()
@@ -53,6 +54,24 @@ test('notifies node toggle changes', t => {
t.true(onChange.calledWith('0-0-0'))
})
+test('can toggle with enter and space', t => {
+ const node = {
+ _id: '0-0-0',
+ _parent: '0-0',
+ label: 'item0-0-0',
+ value: 'value0-0-0',
+ className: 'cn0-0-0',
+ _children: [{ label: 'item0-0-1', value: 'value0-0-1' }, { label: 'item0-0-2', value: 'value0-0-2' }],
+ }
+
+ ;[{ key: 'Enter' }, { keyCode: 32 }].forEach(event => {
+ const onChange = spy()
+ const wrapper = mount(
diff --git a/src/tree-node/toggle.js b/src/tree-node/toggle.js
index d98c428a..2c39b748 100644
--- a/src/tree-node/toggle.js
+++ b/src/tree-node/toggle.js
@@ -19,10 +19,28 @@ class Toggle extends PureComponent {
this.props.onNodeToggle(this.props.id)
}
+ onKeyDown = e => {
+ if (e.key === 'Enter' || e.keyCode === 32) {
+ this.props.onNodeToggle(this.props.id)
+ e.preventDefault()
+ }
+ }
+
render() {
const { expanded, isLeaf } = this.props
- const toggleCx = cx('toggle', { expanded: !isLeaf && expanded, collapsed: !isLeaf && !expanded })
- return