bugfix(react-tree): actions lose visibility when mouse and keyboard interactions are mixed (#33731)

Author: bsunderhus

change/@fluentui-react-tree-21c9c828-174f-4ff3-8c60-9de46396262a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "bugfix: actions lose visibility when mouse and keyboard interactions are mixed",
+  "packageName": "@fluentui/react-tree",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

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

@@ -325,6 +325,31 @@ describe('Tree', () => {
       });
     });
   });
+  describe('Keyboard + Mouse interactions', () => {
+    it('actions should remain visible whenever a focused treeitem is hovered in/out', () => {
+      mount(
+        <TreeTest defaultOpenItems={['item1']} id="tree" aria-label="Tree">
+          <TreeItem itemType="branch" value="item1" data-testid="item1">
+            <TreeItemLayout actions={<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>
+          <TreeItem itemType="leaf" value="item2" data-testid="item2">
+            <TreeItemLayout>level 2, item 1</TreeItemLayout>
+          </TreeItem>
+        </TreeTest>,
+      );
+      cy.focused().should('not.exist');
+      cy.document().realPress('Tab');
+      cy.get('[data-testid="item1"]').should('be.focused');
+      cy.get('#action').should('be.visible').realHover();
+      cy.get('[data-testid=item2]').realHover();
+      cy.get('#action').should('be.visible');
+    });
+  });
 
   describe('Control open state per item', () => {
     it('should remain open when opening/closing a controlled item', () => {

packages/react-components/react-tree/library/src/components/TreeItemLayout/useTreeItemLayout.tsx

@@ -18,7 +18,8 @@ import type {
 import { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';
 import { Radio, RadioProps } from '@fluentui/react-radio';
 import { TreeItemChevron } from '../TreeItemChevron';
-import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+import { useArrowNavigationGroup, useIsNavigatingWithKeyboard } from '@fluentui/react-tabster';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 
 /**
  * Create the state required to render TreeItemLayout.
@@ -88,6 +89,9 @@ export const useTreeItemLayout_unstable = (
     [subtreeRef, setIsActionsVisible, onActionVisibilityChange],
   );
 
+  const { targetDocument } = useFluent();
+  const isNavigatingWithKeyboard = useIsNavigatingWithKeyboard();
+
   const setActionsInvisibleIfNotFromSubtree = React.useCallback(
     (event: FocusEvent | MouseEvent) => {
       const isRelatedTargetFromActions = () =>
@@ -110,6 +114,17 @@ export const useTreeItemLayout_unstable = (
       if (isTargetFromActions() && isRelatedTargetFromTreeItem()) {
         return;
       }
+      // when a mouseout event happens during keyboard interaction
+      // we should not hide the actions if the activeElement is the treeitem or an action
+      // as the focus on the treeitem takes precedence over the mouseout event
+      if (
+        event.type === 'mouseout' &&
+        isNavigatingWithKeyboard() &&
+        (targetDocument?.activeElement === treeItemRef.current ||
+          elementContains(actionsRefInternal.current, targetDocument?.activeElement as Node))
+      ) {
+        return;
+      }
       onActionVisibilityChange?.(event, {
         visible: false,
         event,
@@ -120,7 +135,7 @@ export const useTreeItemLayout_unstable = (
       }
       setIsActionsVisible(false);
     },
-    [setIsActionsVisible, onActionVisibilityChange, treeItemRef],
+    [setIsActionsVisible, onActionVisibilityChange, treeItemRef, isNavigatingWithKeyboard, targetDocument],
   );
 
   const expandIcon = slot.optional(props.expandIcon, {