[TreeView] fix inconsistent focus for programmatically focused treeit…

…em (mui#20237)
EsoterikStare · Mar 30, 2020 · b6069d0 · b6069d0
1 parent a5e84be
commit b6069d0
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.js b/packages/material-ui-lab/src/TreeItem/TreeItem.js
@@ -322,7 +322,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
@@ -300,6 +300,26 @@ describe('<TreeItem />', () => {
 
         expect(getByTestId('two')).to.have.focus;
       });
+
+      it('should work with programmatic focus', () => {
+        const { getByTestId } = render(
+          <React.Fragment>
+            {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
+            <div data-testid="start" tabIndex={0} />
+            <TreeView>
+              <TreeItem nodeId="1" label="one" data-testid="one" />
+              <TreeItem nodeId="2" label="two" data-testid="two" />
+            </TreeView>
+          </React.Fragment>,
+        );
+
+        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', () => {