fix(fuselage): MenuItem onPointerUp event behavior (#1422)

.changeset/late-glasses-accept.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": patch
+---
+
+fix(fuselage): `MenuItem` onPointerUp event behavior

packages/fuselage/src/components/Menu/V2/MenuItem.tsx

@@ -1,7 +1,7 @@
 import type { Node } from '@react-types/shared';
 import type { ReactNode } from 'react';
 import { useRef } from 'react';
-import { useMenuItem } from 'react-aria';
+import { mergeProps, useMenuItem } from 'react-aria';
 import type { TreeState } from 'react-stately';
 
 import { MenuItemDescription } from '.';
@@ -18,15 +18,18 @@ type MenuItemProps = {
 
 function MenuItem({ item, state }: MenuItemProps) {
   const ref = useRef(null);
-  const { menuItemProps, isFocused, isDisabled } = useMenuItem(
-    { key: item.key },
-    state,
-    ref
-  );
+  const {
+    menuItemProps: { onPointerUp, ...menuItemProps },
+    isFocused,
+    isDisabled,
+  } = useMenuItem({ key: item.key }, state, ref);
+
+  // There's an issue caused by conflicting event handlers. The popover opens on onPointerDown and the selection event for both, the menu (listbox), happens on onPointerUp.
+  // As a workaround, we are overwriting `onPointerDown` event with `onPointerUp`
 
   return (
     <MenuOption
-      {...menuItemProps}
+      {...mergeProps(menuItemProps, { onPointerDown: onPointerUp })}
       ref={ref}
       focus={isFocused}
       disabled={isDisabled}