[Menu] Mark certain key events as handled for MenuPopover (#2463)

### Platforms Impacted
- [ ] iOS
- [ ] macOS
- [ ] win32 (Office)
- [ ] windows
- [ ] android

### Description of changes

In the MenuPopover, certain key events are automatically handled by native, but the key event gets fired on the JS side anyway (this is by design for RN). This can cause bugs as keys could get double handled if a user has a separate key handler set up.

Since the key events are handled on native, it would make sense to automatically mark those key events as handled. That way, they don't get handled on the JS side, too.

### Verification

Tested change against client code

### Pull request checklist

This PR has considered (when applicable):
- [ ] Automated Tests
- [ ] Documentation and examples
- [ ] Keyboard Accessibility
- [ ] Voiceover
- [ ] Internationalization and Right-to-left Layouts

Author: rurikoaraki

change/@fluentui-react-native-menu-034f3fe4-0624-4e0d-b170-889332c18ba9.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Override key handling",
+  "packageName": "@fluentui-react-native/menu",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/components/Menu/src/MenuPopover/useMenuPopover.ts

@@ -6,7 +6,7 @@ import { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';
 
 const controlledDismissBehaviors = ['preventDismissOnKeyDown', 'preventDismissOnClickOutside'] as DismissBehaviors[];
 
-export const useMenuPopover = (_props: MenuPopoverProps): MenuPopoverState => {
+export const useMenuPopover = (props: MenuPopoverProps): MenuPopoverState => {
   const context = useMenuContext();
   const {
     setOpen,
@@ -21,6 +21,8 @@ export const useMenuPopover = (_props: MenuPopoverProps): MenuPopoverState => {
     triggerHoverOutTimer,
   } = context;
 
+  const { onKeyDown: onKeyDownProp, onKeyUp: onKeyUpProp } = props;
+
   const onDismiss = React.useCallback(() => setOpen(undefined, false /* isOpen */), [setOpen]);
   const dismissBehaviors = isControlled ? controlledDismissBehaviors : undefined;
   const directionalHint = getDirectionalHint(isSubmenu, I18nManager.isRTL);
@@ -36,6 +38,7 @@ export const useMenuPopover = (_props: MenuPopoverProps): MenuPopoverState => {
     clearTimeout(popoverHoverOutTimer);
     clearTimeout(parentPopoverHoverOutTimer);
   }, [parentPopoverHoverOutTimer, popoverHoverOutTimer, triggerHoverOutTimer]);
+
   const onMouseLeave = React.useCallback(() => {
     if (!openOnHover) {
       return;
@@ -47,6 +50,42 @@ export const useMenuPopover = (_props: MenuPopoverProps): MenuPopoverState => {
     setPopoverHoverOutTimer(timer);
   }, [openOnHover, setOpen, setPopoverHoverOutTimer]);
 
+  const onKeyDown = React.useCallback(
+    (e) => {
+      onKeyDownProp && onKeyDownProp(e);
+
+      // Mark key events that move selection as handled.
+      // These key events are handled on the native side.
+      switch (e.nativeEvent.key) {
+        case 'ArrowUp':
+        case 'ArrowDown':
+        case 'Tab':
+        case 'Home':
+        case 'End':
+          e.stopPropagation();
+      }
+    },
+    [onKeyDownProp],
+  );
+
+  const onKeyUp = React.useCallback(
+    (e) => {
+      onKeyUpProp && onKeyUpProp(e);
+
+      // Mark key events that move selection as handled.
+      // These key events are handled on the native side.
+      switch (e.nativeEvent.key) {
+        case 'ArrowUp':
+        case 'ArrowDown':
+        case 'Tab':
+        case 'Home':
+        case 'End':
+          e.stopPropagation();
+      }
+    },
+    [onKeyUpProp],
+  );
+
   const [canFocusOnPopover, setCanFocusOnPopover] = React.useState<boolean>(shouldFocusOnContainer);
   const onBlur = React.useCallback(() => {
     setCanFocusOnPopover(false);
@@ -71,6 +110,8 @@ export const useMenuPopover = (_props: MenuPopoverProps): MenuPopoverState => {
     innerView: {
       onMouseEnter,
       onMouseLeave,
+      onKeyDown,
+      onKeyUp,
       accessible: shouldFocusOnContainer,
       focusable: canFocusOnPopover,
       onBlur,

packages/components/Menu/src/__tests__/__snapshots__/Menu.test.tsx.snap

@@ -196,6 +196,8 @@ Array [
       accessible={false}
       focusable={false}
       onBlur={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -465,6 +467,8 @@ Array [
       accessible={false}
       focusable={false}
       onBlur={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -666,6 +670,8 @@ Array [
       accessible={false}
       focusable={false}
       onBlur={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1067,6 +1073,8 @@ Array [
       accessible={false}
       focusable={false}
       onBlur={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1468,6 +1476,8 @@ Array [
       accessible={false}
       focusable={false}
       onBlur={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -1869,6 +1879,8 @@ Array [
       accessible={false}
       focusable={false}
       onBlur={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -2258,6 +2270,8 @@ Array [
       accessible={false}
       focusable={false}
       onBlur={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >