chore(react-tree): adds test to ensure action visibility on click

change/@fluentui-react-tree-4b093b38-bed9-4cce-b5d4-cae84f81077d.json

@@ -0,0 +1,6 @@
+{
+  "type": "minor",
+  "packageName": "@fluentui/react-tree",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tree-db00a5cf-8503-47b5-b592-4dee6eea25a9.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "bugfix: TreeNavigation deprecates Click events in favor of Focus events",
+  "packageName": "@fluentui/react-tree",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-tree/library/etc/react-tree.api.md

@@ -301,6 +301,16 @@ export type TreeNavigationData_unstable = {
     value: TreeItemValue;
     parentValue: TreeItemValue | undefined;
 } & ({
+    event: React_2.FocusEvent<HTMLElement>;
+    type: 'Focus';
+}
+/**
+* @deprecated
+*
+* Use `type: 'Focus'` instead of Click,
+* a real click will trigger a focus event, which will trigger a navigation event,
+*/
+| {
     event: React_2.MouseEvent<HTMLElement>;
     type: 'Click';
 } | {

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

@@ -128,6 +128,27 @@ describe('Tree', () => {
       cy.get(`#action`).realClick();
       cy.get('[data-testid="item1__item1"]').should('not.exist');
     });
+    it('should show actions when clicked', () => {
+      mount(
+        <TreeTest defaultOpenItems={['item1']} id="tree" aria-label="Tree">
+          <TreeItem itemType="branch" value="item1" data-testid="item1">
+            <TreeItemLayout actions={<Button id="branch-action">action!</Button>}>level 1, item 1</TreeItemLayout>
+            <Tree>
+              <TreeItem itemType="leaf" value="item1__item1" data-testid="item1__item1">
+                <TreeItemLayout actions={<Button id="leaf-action">action!</Button>}>level 2, item 1</TreeItemLayout>
+              </TreeItem>
+            </Tree>
+          </TreeItem>
+        </TreeTest>,
+      );
+      cy.get(`#branch-action`).should('not.exist');
+      cy.get('[data-testid="item1"]').realClick();
+      cy.get(`#branch-action`).should('exist');
+      cy.get(`#leaf-action`).should('not.exist');
+      cy.get('[data-testid="item1__item1"]').realClick();
+      cy.get(`#branch-action`).should('not.exist');
+      cy.get(`#leaf-action`).should('exist');
+    });
   });
   describe('Keyboard interactions', () => {
     it('should expand/collapse item on Enter key', () => {

packages/react-components/react-tree/library/src/components/Tree/Tree.types.ts

@@ -20,6 +20,13 @@ export type TreeNavigationData_unstable = {
   value: TreeItemValue;
   parentValue: TreeItemValue | undefined;
 } & (
+  | { event: React.FocusEvent<HTMLElement>; type: 'Focus' }
+  /**
+   * @deprecated
+   *
+   * Use `type: 'Focus'` instead of Click,
+   * a real click will trigger a focus event, which will trigger a navigation event,
+   */
   | { event: React.MouseEvent<HTMLElement>; type: 'Click' }
   | { event: React.KeyboardEvent<HTMLElement>; type: 'TypeAhead' }
   | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {
   getIntrinsicElementProps,
   useId,
@@ -50,6 +49,7 @@ export function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDi
     onClick,
     onKeyDown,
     onChange,
+    onFocus,
     as = 'div',
     itemType = 'leaf',
     'aria-level': level = contextLevel,
@@ -91,49 +91,60 @@ export function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDi
   const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);
   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 handleFocus = useEventCallback((event: React.FocusEvent<HTMLDivElement>) => {
+    onFocus?.(event);
+    if (
+      event.isDefaultPrevented() ||
+      // isEventFromActions
+      elementContains(actionsRef.current, event.target) ||
+      // isEventFromSubtree
+      elementContains(subtreeRef.current, event.target) ||
+      // isEventFromSelection
+      elementContains(selectionRef.current, event.target)
+    ) {
       return;
     }
-    const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target as Node);
-    if (isEventFromSelection) {
+
+    requestTreeResponse({
+      event,
+      value,
+      itemType,
+      parentValue,
+      requestType: 'navigate',
+      type: treeDataTypes.Focus,
+      target: event.currentTarget,
+    });
+  });
+
+  const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {
+    onClick?.(event);
+    if (
+      event.isDefaultPrevented() ||
+      itemType === 'leaf' ||
+      // isEventFromActions
+      elementContains(actionsRef.current, event.target as Node) ||
+      // isEventFromSubtree
+      elementContains(subtreeRef.current, event.target as Node) ||
+      // isEventFromSelection
+      elementContains(selectionRef.current, event.target as Node)
+    ) {
       return;
     }
-    const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);
 
-    ReactDOM.unstable_batchedUpdates(() => {
-      const data = {
-        event,
-        value,
-        open: getNextOpen(),
-        target: event.currentTarget,
-        type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,
-      } as const;
-      props.onOpenChange?.(event, data);
-      requestTreeResponse({
-        ...data,
-        itemType,
-        requestType: 'open',
-      });
-      requestTreeResponse({
-        ...data,
-        itemType,
-        parentValue,
-        requestType: 'navigate',
-        type: treeDataTypes.Click,
-      });
+    const isEventFromExpandIcon = elementContains(expandIconRef.current, event.target as Node);
+
+    const data = {
+      event,
+      value,
+      open: getNextOpen(),
+      target: event.currentTarget,
+      type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,
+    } as const;
+    props.onOpenChange?.(event, data);
+    requestTreeResponse({
+      ...data,
+      itemType,
+      requestType: 'open',
     });
   });
 
@@ -291,6 +302,7 @@ export function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDi
         onClick: handleClick,
         onKeyDown: handleKeyDown,
         onChange: handleChange,
+        onFocus: handleFocus,
       } as const),
       { elementType: 'div' },
     ),

packages/react-components/react-tree/library/src/utils/tokens.ts

@@ -22,4 +22,5 @@ export const treeDataTypes: {
   ArrowDown,
   TypeAhead: 'TypeAhead',
   Change: 'Change',
+  Focus: 'Focus',
 };