diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.js b/packages/material-ui-lab/src/TreeItem/TreeItem.js index 8edcdfa27f2f33..17b875be9848f4 100644 --- a/packages/material-ui-lab/src/TreeItem/TreeItem.js +++ b/packages/material-ui-lab/src/TreeItem/TreeItem.js @@ -100,7 +100,7 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) { collapseIcon, endIcon, expandIcon, - disabled, + disabled: disabledProp, icon: iconProp, id: idProp, label, @@ -123,6 +123,7 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) { isExpanded, isFocused, isSelected, + isDisabled, multiSelect, mapFirstChar, unMapFirstChar, @@ -159,6 +160,7 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) { const expanded = isExpanded ? isExpanded(nodeId) : false; const focused = isFocused ? isFocused(nodeId) : false; const selected = isSelected ? isSelected(nodeId) : false; + const disabled = isDisabled ? isDisabled(nodeId) : false; const icons = contextIcons || {}; if (!icon) { @@ -178,6 +180,10 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) { } const handleClick = (event) => { + if (disabled) { + return; + } + if (!focused) { focus(event, nodeId); } @@ -291,6 +297,7 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) { role="treeitem" aria-expanded={expandable ? expanded : null} aria-selected={ariaSelected} + aria-disabled={disabled} ref={handleRef} id={id} tabIndex="-1" diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.test.js b/packages/material-ui-lab/src/TreeItem/TreeItem.test.js index a7657989a1353b..2f8458bbb335f7 100644 --- a/packages/material-ui-lab/src/TreeItem/TreeItem.test.js +++ b/packages/material-ui-lab/src/TreeItem/TreeItem.test.js @@ -222,6 +222,32 @@ describe('', () => { }); }); + describe('aria-disabled', () => { + it('should have the attribute `aria-disabled=false` if disabled is false', () => { + const { getByTestId } = render( + + + + + , + ); + + expect(getByTestId('test')).to.have.attribute('aria-disabled', 'false'); + }); + + it('should have the attribute `aria-disabled=true` if disabled', () => { + const { getByTestId } = render( + + + + + , + ); + + expect(getByTestId('test')).to.have.attribute('aria-disabled', 'true'); + }); + }); + describe('aria-selected', () => { describe('single-select', () => { it('should not have the attribute `aria-selected` if not selected', () => { @@ -1434,10 +1460,10 @@ describe('', () => { }); }); - describe('prop: deleted', () => { + describe('prop: disabled', () => { it('should disable treeItem', () => { const { getByTestId } = render( - + , @@ -1445,6 +1471,22 @@ describe('', () => { expect(getByTestId('one')).to.have.class(classes.disabled); }); + + it('should disable child items when parent item is disabled', () => { + const { getByTestId } = render( + + + + + + , + ); + + expect(getByTestId('two')).to.have.class(classes.disabled); + expect(getByTestId('two')).to.have.attribute('aria-disabled', 'true'); + expect(getByTestId('three')).to.have.class(classes.disabled); + expect(getByTestId('three')).to.have.attribute('aria-disabled', 'true'); + }); }); it('should be able to type in an child input', () => { diff --git a/packages/material-ui-lab/src/TreeView/TreeView.js b/packages/material-ui-lab/src/TreeView/TreeView.js index e50c6e8804740c..9729fd178e449e 100644 --- a/packages/material-ui-lab/src/TreeView/TreeView.js +++ b/packages/material-ui-lab/src/TreeView/TreeView.js @@ -117,6 +117,23 @@ const TreeView = React.forwardRef(function TreeView(props, ref) { [selected], ); + const isDisabled = (id) => { + let node = nodeMap.current[id]; + + if (node.disabled) { + return true; + } + + while (node.parentId != null) { + if (node.disabled) { + return true; + } + node = nodeMap.current[node.parentId]; + } + + return false; + }; + const isFocused = (id) => focusedNodeId === id; /* @@ -587,7 +604,7 @@ const TreeView = React.forwardRef(function TreeView(props, ref) { let flag = false; const key = event.key; - if (event.altKey || event.currentTarget !== event.target) { + if (event.altKey || event.currentTarget !== event.target || isDisabled(focusedNodeId)) { return; } @@ -707,6 +724,7 @@ const TreeView = React.forwardRef(function TreeView(props, ref) { isExpanded, isFocused, isSelected, + isDisabled, selectNode: disableSelection ? noopSelection : selectNode, selectRange: disableSelection ? noopSelection : selectRange, multiSelect,