fix: use path-based menuId to prevent collisions in nested submenus (#3762)

Closes:
#3606

## Summary

- `prepareMenu` passes `menuIndex` as `index` when recursing into
submenus, losing the original bar button item index
- This causes `menuId` collisions between actions in different submenus
and sibling toolbar menus at the same position
- Fix threads a `path` string through recursion to track nesting depth,
while preserving the original bar button item index

## Problem

Given two toolbar menu buttons — a filter menu at bar button index 1
containing submenus, and a sort menu at bar button index 2:

```
Toolbar:
  [+] button (index 0)
  [filter] menu (index 1)     ← contains Location, Item Type, Quality submenus
  [sort] menu (index 2)       ← contains Title, Gear Type, Date Added actions
```

When `prepareMenu` recurses into the Quality submenu (at `menuIndex` 2
inside the filter menu), it calls:
```ts
prepareMenu(menuItem, menuIndex, side)  // menuIndex=2, replacing index=1
```

The first action inside Quality then gets `menuId: "0-2-right"`, which
collides with the first action in the sort menu (`"0-2-right"`).
Selecting a quality filter fires the sort handler instead.

## Fix

Add a `path` parameter that tracks position through nesting, while
keeping the original bar button `index`:

```ts
const prepareMenu = (
  menu, index, side,
  path = '',  // NEW
) => {
  return {
    ...menu,
    items: menu.items.map((menuItem, menuIndex) => {
      const currentPath = path ? `${path}.${menuIndex}` : `${menuIndex}`;
      // ...
      if (menuItem.type === 'submenu') {
        return {
          ...menuItem,
          ...prepareMenu(menuItem, index, side, currentPath),
          //                       ^^^^^ preserved (was menuIndex)
        };
      }
      return {
        ...menuItem,
        menuId: `${currentPath}-${index}-${side}`,
        //        ^^^^^^^^^^^^ path-based (was menuIndex)
      };
    }),
  };
};
```

**Before:** Quality "All" = `0-2-right` (collides with Sort "Title" =
`0-2-right`)
**After:** Quality "All" = `2.0-1-right`, Sort "Title" = `0-2-right`
(unique)

## Before & after - visual documentation

| Before | After |
| --- | --- |
| <video
src="https://github.com/user-attachments/assets/44420c7e-7850-45be-b4b2-558c38da7b1a"
/> | <video
src="https://github.com/user-attachments/assets/a0deac60-ac7e-4197-91fe-6943a875d06c"
/> |

## Verified

- Toolbar with multiple menu buttons — actions in each menu fire the
correct handler
- Nested submenus (inline sections) within a toolbar menu — no
cross-talk with sibling toolbar menus
- Single menu button with no submenus — no regression (path defaults to
menuIndex)

---------

Co-authored-by: Tomasz Boroń <tomasz.boron@swmansion.com>

Author: chrism

apps/src/tests/issue-tests/Test3606.tsx

@@ -0,0 +1,136 @@
+import React, { useEffect } from 'react';
+import { Alert, StyleSheet, Text, View } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from '@react-navigation/native-stack';
+
+type RouteParamList = {
+  Home: undefined;
+};
+
+type StackNavigationProp = {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+};
+
+const Stack = createNativeStackNavigator<RouteParamList>();
+
+function HomeScreen({ navigation }: StackNavigationProp) {
+  useEffect(() => {
+    navigation.setOptions({
+      unstable_headerRightItems: () => [
+        {
+          type: 'menu',
+          label: 'Menu 1',
+          menu: {
+            items: [
+              {
+                type: 'action',
+                label: 'Action 1',
+                onPress: () => Alert.alert('Menu 1', 'Action 1'),
+              },
+              {
+                type: 'submenu',
+                label: 'Submenu 1',
+                items: [
+                  {
+                    type: 'action',
+                    label: 'Action 1',
+                    onPress: () => Alert.alert('Submenu 1', 'Action 1'),
+                  },
+                  {
+                    type: 'action',
+                    label: 'Action 2',
+                    onPress: () => Alert.alert('Submenu 1', 'Action 2'),
+                  },
+                ],
+              },
+            ],
+          },
+        },
+        {
+          type: 'menu',
+          label: 'Menu 2',
+          menu: {
+            items: [
+              {
+                type: 'action',
+                label: 'Action 1',
+                onPress: () => Alert.alert('Menu 2', 'Action 1'),
+              },
+              {
+                type: 'action',
+                label: 'Action 2',
+                onPress: () => Alert.alert('Menu 2', 'Action 2'),
+              },
+            ],
+          },
+        },
+      ],
+    });
+  }, [navigation]);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>
+        menuId collision: submenu vs top-level menu
+      </Text>
+
+      <Text style={styles.description}>
+        <Text style={styles.bold}>Steps to reproduce{'\n'}</Text>
+        1. Tap Menu 1{'\n'}
+        2. Open Submenu 1{'\n'}
+        3. Select Action 1{'\n\n'}
+        <Text style={styles.pass}>
+          <Text style={styles.bold}>Expected alert:{'\n'}</Text>
+          Submenu 1{'\n'}
+          Action 1{'\n\n'}
+        </Text>
+        <Text style={styles.bug}>
+          <Text style={styles.bold}>Bug alert:{'\n'}</Text>
+          Menu 1{'\n'}
+          Action 1{'\n'}
+        </Text>
+      </Text>
+    </View>
+  );
+}
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen name="Home" component={HomeScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginBottom: 16,
+    textAlign: 'center',
+  },
+  description: {
+    fontSize: 14,
+    lineHeight: 22,
+  },
+  pass: {
+    color: 'green',
+  },
+  bug: {
+    color: 'red',
+  },
+  bold: {
+    fontWeight: 'bold',
+  },
+});

apps/src/tests/issue-tests/index.ts

@@ -179,6 +179,7 @@ export { default as Test3566 } from './Test3566';
 export { default as Test3568 } from './Test3568';
 export { default as Test3576 } from './Test3576';
 export { default as Test3596 } from './Test3596';
+export { default as Test3606 } from './Test3606';
 export { default as Test3611 } from './Test3611';
 export { default as Test3617 } from './Test3617';
 export { default as Test3636 } from './Test3636';

src/components/helpers/prepareHeaderBarButtonItems.ts

@@ -8,10 +8,12 @@ const prepareMenu = (
   menu: HeaderBarButtonItemWithMenu['menu'],
   index: number,
   side: 'left' | 'right',
+  path: string = '',
 ): HeaderBarButtonItemWithMenu['menu'] => {
   return {
     ...menu,
     items: menu.items.map((menuItem, menuIndex) => {
+      const currentPath = path ? `${path}.${menuIndex}` : `${menuIndex}`;
       const iconType = menuItem.icon?.type;
       const sfSymbolName =
         iconType === 'sfSymbol' ? menuItem.icon?.name : undefined;
@@ -32,7 +34,7 @@ const prepareMenu = (
           xcassetName,
           imageSource,
           templateSource,
-          ...prepareMenu(menuItem, menuIndex, side),
+          ...prepareMenu(menuItem, index, side, currentPath),
         };
       }
       return {
@@ -41,7 +43,7 @@ const prepareMenu = (
         xcassetName,
         imageSource,
         templateSource,
-        menuId: `${menuIndex}-${index}-${side}`,
+        menuId: `${currentPath}-${index}-${side}`,
       };
     }),
   };