Prevent programmatic focus, add more tests and make disabled styling …

…less specific

docs/src/pages/components/tree-view/tree-view.md

@@ -66,7 +66,7 @@ The behaviour of disabled tree items depends on the `disabledItemsFocusable` pro
 If it is false:
 
 - Mouse clicks will not focus disabled items.
-- Arrow keys will focus disabled items and, the next non-disabled item will be focused.
+- Arrow keys will not focus disabled items and, the next non-disabled item will be focused.
 - Typing the first character of a disabled item's label will not focus the item.
 - Mouse or keyboard interaction will not expand/collapse disabled items.
 - Mouse or keyboard interaction will not select disabled items.

packages/material-ui-lab/src/TreeItem/TreeItem.js

@@ -37,6 +37,10 @@ export const styles = (theme) => ({
         backgroundColor: 'transparent',
       },
     },
+    '&$disabled': {
+      opacity: theme.palette.action.disabledOpacity,
+      backgroundColor: 'transparent',
+    },
     '&$focused': {
       backgroundColor: theme.palette.action.focus,
     },
@@ -59,12 +63,6 @@ export const styles = (theme) => ({
         ),
       },
     },
-    '&$disabled': {
-      opacity: theme.palette.action.disabledOpacity,
-      '&:hover': {
-        backgroundColor: 'transparent',
-      },
-    },
   },
   /* Pseudo-class applied to the content element when expanded. */
   expanded: {},
@@ -126,6 +124,7 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
     isSelected,
     isDisabled,
     multiSelect,
+    disabledItemsFocusable,
     mapFirstChar,
     unMapFirstChar,
     registerNode,
@@ -209,7 +208,9 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
     }
   };
 
+  const wasClick = React.useRef(false);
   const handleMouseDown = (event) => {
+    wasClick.current = true;
     if (event.shiftKey || event.ctrlKey || event.metaKey) {
       // Prevent text selection
       event.preventDefault();
@@ -276,9 +277,11 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
           tree.focus();
         }
 
-        if (!focused && event.currentTarget === event.target) {
+        const unfocusable = !disabledItemsFocusable && disabled;
+        if (!wasClick.current && !focused && event.currentTarget === event.target && !unfocusable) {
           focus(event, nodeId);
         }
+        wasClick.current = false;
       };
 
       // Using focusin to avoid blurring the tree.
@@ -289,7 +292,7 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
       };
     }
     return undefined;
-  }, [focus, focused, nodeId, nodeRef, treeId]);
+  }, [focus, focused, nodeId, nodeRef, treeId, disabledItemsFocusable, disabled]);
 
   return (
     <li