bugfix(react-tree): ensure that onActionVisibilityChange is properly …

…invoked (#33320)
microsoft · Nov 21, 2024 · f7ad10b · f7ad10b
1 parent 18b80eb
commit f7ad10b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/change/@fluentui-react-tree-42fe21a3-4b97-431e-b2b6-ed5e0bc00663.json b/change/@fluentui-react-tree-42fe21a3-4b97-431e-b2b6-ed5e0bc00663.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "bugfix: ensure that onActionVisibilityChange is properly invoked",
+  "packageName": "@fluentui/react-tree",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/...s/react-components/react-tree/library/src/components/TreeItemLayout/useTreeItemLayout.tsx b/...s/react-components/react-tree/library/src/components/TreeItemLayout/useTreeItemLayout.tsx
@@ -78,6 +78,9 @@ export const useTreeItemLayout_unstable = (
           event,
           type: event.type,
         } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);
+        if (event.defaultPrevented) {
+          return;
+        }
         setIsActionsVisible(true);
       }
     },
@@ -97,6 +100,9 @@ export const useTreeItemLayout_unstable = (
           event,
           type: event.type,
         } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);
+        if (event.defaultPrevented) {
+          return;
+        }
         setIsActionsVisible(true);
         return;
       }
@@ -108,6 +114,9 @@ export const useTreeItemLayout_unstable = (
         event,
         type: event.type,
       } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);
+      if (event.defaultPrevented) {
+        return;
+      }
       setIsActionsVisible(false);
     },
     [setIsActionsVisible, onActionVisibilityChange, treeItemRef],
@@ -155,7 +164,7 @@ export const useTreeItemLayout_unstable = (
   const hasActions = Boolean(props.actions);
 
   React.useEffect(() => {
-    if (treeItemRef.current && hasActions && isActionsVisibleFromProps === undefined) {
+    if (treeItemRef.current && hasActions) {
       const treeItemElement = treeItemRef.current;
 
       const handleMouseOver = setActionsVisibleIfNotFromSubtree;
@@ -175,13 +184,7 @@ export const useTreeItemLayout_unstable = (
         treeItemElement.removeEventListener('blur', handleBlur);
       };
     }
-  }, [
-    hasActions,
-    treeItemRef,
-    isActionsVisibleFromProps,
-    setActionsVisibleIfNotFromSubtree,
-    setActionsInvisibleIfNotFromSubtree,
-  ]);
+  }, [hasActions, treeItemRef, setActionsVisibleIfNotFromSubtree, setActionsInvisibleIfNotFromSubtree]);
 
   return {
     components: {