Fix menus autoclosed when clicked element on top of the menu item (#3131)

* Fix menus autoclosed when clicked element on top of the menu item

* Release notes

packages/desktop-client/src/components/common/Menu.tsx

@@ -129,7 +129,7 @@ export function Menu<T extends MenuItem>({
         } else if (item.type === Menu.label) {
           return (
             <Text
-              key={item.name}
+              key={idx}
               style={{
                 color: theme.menuItemTextHeader,
                 fontSize: 11,
@@ -167,7 +167,7 @@ export function Menu<T extends MenuItem>({
             }}
             onPointerEnter={() => setHoveredIndex(idx)}
             onPointerLeave={() => setHoveredIndex(null)}
-            onClick={e => {
+            onPointerUp={e => {
               e.stopPropagation();
 
               if (!item.disabled && item.toggle === undefined) {

packages/desktop-client/src/components/mobile/accounts/Accounts.jsx

@@ -12,7 +12,7 @@ import { useSetThemeColor } from '../../../hooks/useSetThemeColor';
 import { SvgAdd } from '../../../icons/v1';
 import { theme, styles } from '../../../style';
 import { makeAmountFullStyle } from '../../budget/util';
-import { Button } from '../../common/Button';
+import { Button } from '../../common/Button2';
 import { Text } from '../../common/Text';
 import { TextOneLine } from '../../common/TextOneLine';
 import { View } from '../../common/View';
@@ -78,17 +78,17 @@ function AccountCard({
       data-testid="account"
     >
       <Button
-        onMouseDown={() => onSelect(account.id)}
-        style={{
+        onPress={() => onSelect(account.id)}
+        style={({ isPressed }) => ({
           flexDirection: 'row',
           border: '1px solid ' + theme.pillBorder,
           flex: 1,
           alignItems: 'center',
           borderRadius: 6,
-          '&:active': {
+          ...(isPressed && {
             opacity: 0.1,
-          },
-        }}
+          }),
+        })}
       >
         <View
           style={{
@@ -182,14 +182,13 @@ function AccountList({
           title="Accounts"
           rightContent={
             <Button
-              type="bare"
-              style={{
+              variant="bare"
+              style={({ isHovered, isPressed }) => ({
                 color: theme.mobileHeaderText,
                 margin: 10,
-              }}
-              activeStyle={noBackgroundColorStyle}
-              hoveredStyle={noBackgroundColorStyle}
-              onClick={onAddAccount}
+                ...(isHovered || isPressed ? noBackgroundColorStyle : {}),
+              })}
+              onPress={onAddAccount}
             >
               <SvgAdd width={20} height={20} />
             </Button>

packages/desktop-client/src/components/mobile/transactions/Transaction.jsx

@@ -15,7 +15,7 @@ import {
 } from '../../../icons/v2';
 import { styles, theme } from '../../../style';
 import { makeAmountFullStyle } from '../../budget/util';
-import { Button } from '../../common/Button';
+import { Button } from '../../common/Button2';
 import { Text } from '../../common/Text';
 import { TextOneLine } from '../../common/TextOneLine';
 import { View } from '../../common/View';
@@ -100,7 +100,9 @@ export const Transaction = memo(function Transaction({
 
   return (
     <Button
-      onClick={() => onSelect(transaction)}
+      onPress={() => {
+        onSelect(transaction);
+      }}
       style={{
         backgroundColor: theme.tableBackground,
         border: 'none',

upcoming-release-notes/3131.md

+---
+category: Bugfix
+authors: [joel-jeremy]
+---
+
+Fix menus autoclosed when clicked element on top of the menu