bugfix(react-tree): ensure onClick handler is not called on every cli…

…ck (microsoft#32434)

change/@fluentui-react-tree-c00b8f2d-0e5d-4f88-8d83-28cac9a82913.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "bugfix: ensure onClick handler is not called on every click",
+  "packageName": "@fluentui/react-tree",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-tree/library/src/components/Tree/Tree.cy.tsx

@@ -465,6 +465,34 @@ describe('Tree', () => {
   });
 });
 
+describe('TreeItem', () => {
+  it('should not call onClick when clicking on: expand icon, actions or subtree', () => {
+    const handleClick = cy.stub().as('onClick');
+    mount(
+      <TreeTest id="tree" aria-label="Tree">
+        <TreeItem open onClick={handleClick} itemType="branch" value="item1" data-testid="item1">
+          <TreeItemLayout
+            expandIcon={{ 'data-testid': 'item1__expandIcon' } as {}}
+            actions={{ visible: true, children: <Button id="action">action!</Button> }}
+          >
+            level 1, item 1
+          </TreeItemLayout>
+          <Tree>
+            <TreeItem itemType="leaf" value="item1__item1" data-testid="item1__item1">
+              <TreeItemLayout>level 2, item 1</TreeItemLayout>
+            </TreeItem>
+          </Tree>
+        </TreeItem>
+      </TreeTest>,
+    );
+    cy.get('[data-testid="item1__item1"]').should('exist');
+    cy.get(`#action`).realClick();
+    cy.get('[data-testid="item1__item1"]').realClick();
+    cy.get('[data-testid="item1__expandIcon"]').realClick();
+    cy.get('@onClick').should('not.have.been.called');
+  });
+});
+
 declare global {
   namespace Cypress {
     interface Chainable<Subject> {

packages/react-components/react-tree/library/src/components/TreeItem/useTreeItem.tsx

@@ -92,26 +92,22 @@ export function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDi
   const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);
 
   const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {
-    onClick?.(event);
-    if (event.isDefaultPrevented()) {
-      return;
-    }
-    if (itemType === 'leaf') {
-      return;
-    }
-    const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target as Node);
-    if (isEventFromActions) {
-      return;
-    }
-    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);
-    if (isEventFromSubtree) {
+    const isEventFromActions = () => actionsRef.current && elementContains(actionsRef.current, event.target as Node);
+
+    const isEventFromSubtree = () => subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);
+
+    const isEventFromSelection = () => selectionRef.current?.contains(event.target as Node);
+
+    const isEventFromExpandIcon = expandIconRef.current?.contains(event.target as Node);
+
+    if (isEventFromActions() || isEventFromSubtree() || isEventFromSelection()) {
       return;
+    } else if (!isEventFromExpandIcon) {
+      onClick?.(event);
     }
-    const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target as Node);
-    if (isEventFromSelection) {
+    if (event.isDefaultPrevented() || itemType === 'leaf') {
       return;
     }
-    const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);
 
     ReactDOM.unstable_batchedUpdates(() => {
       const data = {