diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 57bd547b17..148e93b55d 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -52450,6 +52450,14 @@ "default": "", "description": "A single key to control the selection with the context menu." }, + { + "name": "disableKeyboardNavigation", + "optional": true, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "When present, it disables keyboard navigation around the tree." + }, { "name": "disabled", "optional": true, diff --git a/components/lib/tree/Tree.js b/components/lib/tree/Tree.js index 2bc75e0faa..cb3c3e4abb 100644 --- a/components/lib/tree/Tree.js +++ b/components/lib/tree/Tree.js @@ -417,6 +417,7 @@ export const Tree = React.memo( collapseIcon={props.collapseIcon} contextMenuSelectionKey={props.contextMenuSelectionKey} cx={cx} + disableKeyboardNavigation={props.disableKeyboardNavigation} disabled={props.disabled} dragdropScope={props.dragdropScope} expandIcon={props.expandIcon} diff --git a/components/lib/tree/TreeBase.js b/components/lib/tree/TreeBase.js index a717c64656..698ac5a1f5 100644 --- a/components/lib/tree/TreeBase.js +++ b/components/lib/tree/TreeBase.js @@ -122,6 +122,7 @@ export const TreeBase = ComponentBase.extend({ contentClassName: null, contentStyle: null, contextMenuSelectionKey: null, + disableKeyboardNavigation: false, disabled: false, dragdropScope: null, emptyMessage: null, diff --git a/components/lib/tree/UITreeNode.js b/components/lib/tree/UITreeNode.js index 14c3e50998..2ac08c9aca 100644 --- a/components/lib/tree/UITreeNode.js +++ b/components/lib/tree/UITreeNode.js @@ -372,19 +372,21 @@ export const UITreeNode = React.memo((props) => { }; const onArrowDown = (event) => { - const nodeElement = event.target.getAttribute('data-pc-section') === 'toggler' ? event.target.closest('[role="treeitem"]') : event.target; - const listElement = nodeElement.children[1]; - const nextElement = getNextElement(nodeElement); - - if (listElement) { - focusRowChange(nodeElement, props.dragdropScope ? listElement.children[1] : listElement.children[0]); - } else if (nextElement) { - focusRowChange(nodeElement, nextElement); - } else { - let nextSiblingAncestor = findNextSiblingOfAncestor(nodeElement); - - if (nextSiblingAncestor) { - focusRowChange(nodeElement, nextSiblingAncestor); + if(!props.disableKeyboardNavigation) { + const nodeElement = event.target.getAttribute('data-pc-section') === 'toggler' ? event.target.closest('[role="treeitem"]') : event.target; + const listElement = nodeElement.children[1]; + const nextElement = getNextElement(nodeElement); + + if (listElement) { + focusRowChange(nodeElement, props.dragdropScope ? listElement.children[1] : listElement.children[0]); + } else if (nextElement) { + focusRowChange(nodeElement, nextElement); + } else { + let nextSiblingAncestor = findNextSiblingOfAncestor(nodeElement); + + if (nextSiblingAncestor) { + focusRowChange(nodeElement, nextSiblingAncestor); + } } } @@ -412,16 +414,18 @@ export const UITreeNode = React.memo((props) => { }; const onArrowUp = (event) => { - const nodeElement = event.target; - const previous = getPreviousElement(nodeElement); - - if (previous) { - focusRowChange(nodeElement, previous, findLastVisibleDescendant(previous)); - } else { - let parentNodeElement = getParentNodeElement(nodeElement); - - if (parentNodeElement) { - focusRowChange(nodeElement, parentNodeElement); + if(!props.disableKeyboardNavigation) { + const nodeElement = event.target; + const previous = getPreviousElement(nodeElement); + + if (previous) { + focusRowChange(nodeElement, previous, findLastVisibleDescendant(previous)); + } else { + let parentNodeElement = getParentNodeElement(nodeElement); + + if (parentNodeElement) { + focusRowChange(nodeElement, parentNodeElement); + } } } @@ -429,44 +433,52 @@ export const UITreeNode = React.memo((props) => { }; const onArrowRight = (event) => { - if (isLeaf || expanded) { - return; + if(!props.disableKeyboardNavigation) { + if (isLeaf || expanded) { + return; + } + + event.currentTarget.tabIndex = -1; + + expand(event, true); } - - event.currentTarget.tabIndex = -1; - - expand(event, true); }; const onArrowLeft = (event) => { - const togglerElement = DomHandler.findSingle(event.currentTarget, '[data-pc-section="toggler"]'); - - if (props.level === 0 && !expanded) { - return false; - } - - if (expanded && !isLeaf) { - togglerElement.click(); - - return false; - } - - const target = findBeforeClickableNode(event.currentTarget); - - if (target) { - focusRowChange(event.currentTarget, target); + if(!props.disableKeyboardNavigation) { + const togglerElement = DomHandler.findSingle(event.currentTarget, '[data-pc-section="toggler"]'); + + if (props.level === 0 && !expanded) { + return false; + } + + if (expanded && !isLeaf) { + togglerElement.click(); + + return false; + } + + const target = findBeforeClickableNode(event.currentTarget); + + if (target) { + focusRowChange(event.currentTarget, target); + } } }; const onEnterKey = (event) => { - setTabIndexForSelectionMode(event, nodeTouched.current); - onClick(event); + if(!props.disableKeyboardNavigation) { + setTabIndexForSelectionMode(event, nodeTouched.current); + onClick(event); + } event.preventDefault(); }; const onTabKey = () => { - setAllNodesTabIndexes(); + if(!props.disableKeyboardNavigation) { + setAllNodesTabIndexes(); + } }; const setAllNodesTabIndexes = () => {