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', () => {