diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.js b/packages/material-ui-lab/src/TreeItem/TreeItem.js
index d6f8a835eed085..08f80c9d44037c 100644
--- a/packages/material-ui-lab/src/TreeItem/TreeItem.js
+++ b/packages/material-ui-lab/src/TreeItem/TreeItem.js
@@ -328,7 +328,7 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
};
const handleFocus = (event) => {
- if (!focused && tabbable) {
+ if (!focused && event.currentTarget === event.target) {
focus(nodeId);
}
diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.test.js b/packages/material-ui-lab/src/TreeItem/TreeItem.test.js
index a9c2dbe1db6e6e..9fd4fbadddb55f 100644
--- a/packages/material-ui-lab/src/TreeItem/TreeItem.test.js
+++ b/packages/material-ui-lab/src/TreeItem/TreeItem.test.js
@@ -300,6 +300,26 @@ describe('', () => {
expect(getByTestId('two')).to.have.focus;
});
+
+ it('should work with programmatic focus', () => {
+ const { getByTestId } = render(
+
+ {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
+
+
+
+
+
+ ,
+ );
+
+ expect(getByTestId('one')).to.have.attribute('tabindex', '0');
+ expect(getByTestId('two')).to.have.attribute('tabindex', '-1');
+
+ getByTestId('two').focus();
+ expect(getByTestId('one')).to.have.attribute('tabindex', '-1');
+ expect(getByTestId('two')).to.have.attribute('tabindex', '0');
+ });
});
describe('Navigation', () => {