From 0df364b2abda76c69fcf13d1bdd6fb4336c9d209 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BAlia=20Jaeger=20Foresti?=
 <60678893+juliajforesti@users.noreply.github.com>
Date: Thu, 1 Aug 2024 18:37:50 -0300
Subject: [PATCH] fix(fuselage): `MenuItem` onPointerUp event behavior (#1422)

---
 .changeset/late-glasses-accept.md               |  5 +++++
 .../src/components/Menu/V2/MenuItem.tsx         | 17 ++++++++++-------
 2 files changed, 15 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/late-glasses-accept.md

diff --git a/.changeset/late-glasses-accept.md b/.changeset/late-glasses-accept.md
new file mode 100644
index 0000000000..e12a8d1dba
--- /dev/null
+++ b/.changeset/late-glasses-accept.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": patch
+---
+
+fix(fuselage): `MenuItem` onPointerUp event behavior
diff --git a/packages/fuselage/src/components/Menu/V2/MenuItem.tsx b/packages/fuselage/src/components/Menu/V2/MenuItem.tsx
index 9ff2893ba9..dfb0f33cc5 100644
--- a/packages/fuselage/src/components/Menu/V2/MenuItem.tsx
+++ b/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}