Fix: Proper onClick handling for MenuGridRow

change/@fluentui-react-menu-grid-preview-dfaabf9b-968d-4e70-a6bf-2a2c9e8dd07e.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Proper onClick handling for MenuGridRow",
+  "packageName": "@fluentui/react-menu-grid-preview",
+  "email": "adam.samec@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-menu-grid-preview/library/src/components/MenuGrid/useMenuGrid.ts

@@ -10,6 +10,7 @@ import {
 } from '@fluentui/react-utilities';
 
 import { useTableCompositeNavigation } from '@fluentui/react-table';
+import { useMergedTabsterAttributes_unstable, useTabsterAttributes } from '@fluentui/react-tabster';
 import type { MenuGridProps, MenuGridState } from './MenuGrid.types';
 import { useMenuContext_unstable } from '@fluentui/react-menu';
 import { useValidateNesting } from '../../utils/useValidateNesting';
@@ -23,6 +24,17 @@ export const useMenuGrid_unstable = (props: MenuGridProps, ref: React.Ref<HTMLDi
   const { tableRowTabsterAttribute, tableTabsterAttribute, onTableKeyDown } = useTableCompositeNavigation();
   const onKeyDown = useEventCallback(mergeCallbacks(props.onKeyDown, onTableKeyDown));
 
+  const ignoreEnterKeyAttribute = useTabsterAttributes({
+    focusable: {
+      ignoreKeydown: { Enter: true },
+    },
+  });
+
+  const mergedRowTabsterAttribute = useMergedTabsterAttributes_unstable(
+    tableRowTabsterAttribute,
+    ignoreEnterKeyAttribute,
+  );
+
   return {
     components: {
       root: 'div',
@@ -38,6 +50,6 @@ export const useMenuGrid_unstable = (props: MenuGridProps, ref: React.Ref<HTMLDi
       }),
       { elementType: 'div' },
     ),
-    tableRowTabsterAttribute,
+    tableRowTabsterAttribute: mergedRowTabsterAttribute,
   };
 };

packages/react-components/react-menu-grid-preview/library/src/components/MenuGridRow/useMenuGridRow.ts

@@ -1,7 +1,14 @@
 'use client';
 
 import * as React from 'react';
-import { useMergedRefs, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { Enter, Space } from '@fluentui/keyboard-keys';
+import {
+  useMergedRefs,
+  useEventCallback,
+  mergeCallbacks,
+  getIntrinsicElementProps,
+  slot,
+} from '@fluentui/react-utilities';
 
 import { useMenuGridContext_unstable } from '../../contexts/menuGridContext';
 import { MenuGridRowProps, MenuGridRowState } from './MenuGridRow.types';
@@ -14,6 +21,25 @@ export function useMenuGridRow_unstable(props: MenuGridRowProps, ref: React.Ref<
   const validateNestingRef = useValidateNesting('MenuGridRow');
   const { tableRowTabsterAttribute } = useMenuGridContext_unstable();
 
+  const onKeyDownToClick = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (
+      !event.isDefaultPrevented() &&
+      (event.key === Enter || event.key === Space) &&
+      event.target === event.currentTarget
+    ) {
+      // event.preventDefault();
+      event.currentTarget.click();
+    }
+  });
+
+  const onKeyDown = useEventCallback(mergeCallbacks(props.onKeyDown, onKeyDownToClick));
+
+  const onClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {
+    if (event.target === event.currentTarget) {
+      props.onClick?.(event);
+    }
+  });
+
   return {
     components: {
       root: 'div',
@@ -25,6 +51,8 @@ export function useMenuGridRow_unstable(props: MenuGridRowProps, ref: React.Ref<
         tabIndex: 0,
         ...tableRowTabsterAttribute,
         ...props,
+        onKeyDown,
+        onClick,
       }),
       { elementType: 'div' },
     ),

packages/react-components/react-menu-grid-preview/stories/src/MenuGrid/MenuGridAsymmetric.stories.tsx

@@ -13,6 +13,10 @@ const items = [
 ];
 
 export const Asymmetric = (): JSXElement => {
+  const showAlert = (name: string) => {
+    alert(`Item ${name} activated`);
+  };
+
   return (
     <Menu>
       <MenuTrigger disableButtonEnhancement>
@@ -43,6 +47,7 @@ export const Asymmetric = (): JSXElement => {
                   aria-label={`Profile card for ${item.name}`}
                 />
               }
+              onClick={() => showAlert(item.name)}
               aria-label={item.name}
             >
               {item.name}

packages/react-components/react-menu-grid-preview/stories/src/MenuGrid/MenuGridDefault.stories.tsx

@@ -7,6 +7,10 @@ import { DeleteRegular, GlobePersonRegular } from '@fluentui/react-icons';
 const items = ['Olivia Carter', 'Liam Thompson', 'Sophia Martinez', 'Noah Patel', 'Emma Robinson'];
 
 export const Default = (): JSXElement => {
+  const showAlert = (name: string) => {
+    alert(`Item ${name} activated`);
+  };
+
   return (
     <Menu>
       <MenuTrigger disableButtonEnhancement>
@@ -17,6 +21,7 @@ export const Default = (): JSXElement => {
           {items.map(name => (
             <MenuGridItem
               key={name}
+              onClick={() => showAlert(name)}
               aria-label={name}
               icon={
                 <Button

packages/react-components/react-menu-grid-preview/stories/src/MenuGrid/MenuGridGroupingItems.stories.tsx

@@ -10,6 +10,10 @@ const items = {
 };
 
 export const GroupingItems = (): JSXElement => {
+  const showAlert = (name: string) => {
+    alert(`Item ${name} activated`);
+  };
+
   return (
     <Menu>
       <MenuTrigger disableButtonEnhancement>
@@ -38,6 +42,7 @@ export const GroupingItems = (): JSXElement => {
                     aria-label={`Remove ${name}`}
                   />
                 }
+                onClick={() => showAlert(name)}
                 aria-label={name}
               >
                 {name}
@@ -65,6 +70,7 @@ export const GroupingItems = (): JSXElement => {
                     aria-label={`Remove ${name}`}
                   />
                 }
+                onClick={() => showAlert(name)}
                 aria-label={name}
               >
                 {name}

packages/react-components/react-menu-grid-preview/stories/src/MenuGrid/MenuGridMoreComplexMenus.stories.tsx

@@ -7,6 +7,10 @@ import { CameraRegular, DeleteRegular, GlobePersonRegular, PhoneRegular } from '
 const items = ['Olivia Carter', 'Liam Thompson', 'Sophia Martinez', 'Noah Patel', 'Emma Robinson'];
 
 export const MoreComplexMenus = (): JSXElement => {
+  const showAlert = (name: string) => {
+    alert(`Item ${name} activated`);
+  };
+
   return (
     <Menu>
       <MenuTrigger disableButtonEnhancement>
@@ -15,7 +19,7 @@ export const MoreComplexMenus = (): JSXElement => {
       <MenuPopover>
         <MenuGrid>
           {items.map(name => (
-            <MenuGridRow key={name} aria-label={name}>
+            <MenuGridRow key={name} onClick={() => showAlert(name)} aria-label={name}>
               <MenuGridCell>
                 <Button
                   size="small"

packages/react-components/react-menu-grid-preview/stories/src/MenuGrid/MenuGridWithSubmenu.stories.tsx

@@ -36,6 +36,10 @@ const Submenu = () => {
 };
 
 export const WithSubmenu = (): JSXElement => {
+  const showAlert = (name: string) => {
+    alert(`Item ${name} activated`);
+  };
+
   return (
     <Menu>
       <MenuTrigger disableButtonEnhancement>
@@ -44,7 +48,7 @@ export const WithSubmenu = (): JSXElement => {
       <MenuPopover>
         <MenuGrid>
           {items.map(name => (
-            <MenuGridItem key={name} firstSubAction={<Submenu />} aria-label={name}>
+            <MenuGridItem key={name} firstSubAction={<Submenu />} onClick={() => showAlert(name)} aria-label={name}>
               {name}
             </MenuGridItem>
           ))}