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,