[TreeView] Don't move focus when pressing a modifier key + letter (mu…

…i#20309)
EsoterikStare · Mar 30, 2020 · 4b7c780 · 4b7c780
1 parent 6d920da
commit 4b7c780
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 10 deletions.
diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.js b/packages/material-ui-lab/src/TreeItem/TreeItem.js
@@ -195,14 +195,6 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
     }
   };
 
-  const printableCharacter = (event, key) => {
-    if (isPrintableCharacter(key)) {
-      focusByFirstCharacter(nodeId, key);
-      return true;
-    }
-    return false;
-  };
-
   const handleNextArrow = (event) => {
     if (expandable) {
       if (expanded) {
@@ -306,8 +298,9 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
           flag = true;
         } else if (multiSelect && ctrlPressed && key.toLowerCase() === 'a') {
           flag = selectAllNodes(event);
-        } else if (isPrintableCharacter(key)) {
-          flag = printableCharacter(event, key);
+        } else if (!ctrlPressed && !event.shiftKey && isPrintableCharacter(key)) {
+          focusByFirstCharacter(nodeId, key);
+          flag = true;
         }
     }
 

diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.test.js b/packages/material-ui-lab/src/TreeItem/TreeItem.test.js
@@ -651,6 +651,28 @@ describe('<TreeItem />', () => {
           fireEvent.keyDown(document.activeElement, { key: 't' });
           expect(getByTestId('two')).to.have.focus;
         });
+
+        it('should not move focus when pressing a modifier key + letter', () => {
+          const { getByTestId } = render(
+            <TreeView>
+              <TreeItem nodeId="apple" label="apple" data-testid="apple" />
+              <TreeItem nodeId="lemon" label="lemon" data-testid="lemon" />
+              <TreeItem nodeId="coconut" label="coconut" data-testid="coconut" />
+              <TreeItem nodeId="vanilla" label="vanilla" data-testid="vanilla" />
+            </TreeView>,
+          );
+
+          getByTestId('apple').focus();
+          expect(getByTestId('apple')).to.have.focus;
+          fireEvent.keyDown(document.activeElement, { key: 'v', ctrlKey: true });
+          expect(getByTestId('apple')).to.have.focus;
+
+          fireEvent.keyDown(document.activeElement, { key: 'v', metaKey: true });
+          expect(getByTestId('apple')).to.have.focus;
+
+          fireEvent.keyDown(document.activeElement, { key: 'v', shiftKey: true });
+          expect(getByTestId('apple')).to.have.focus;
+        });
       });
 
       describe('asterisk key interaction', () => {