From 97f00d7e6dbca6df74a8f4b43b287ee2918952a2 Mon Sep 17 00:00:00 2001
From: Mahdi <mahdi.banilohi@gmail.com>
Date: Sun, 8 Nov 2026 11:49:47 +0330
Subject: [PATCH] fix(products): open one row menu so edit and other actions
 run

Desktop and mobile dropdowns shared an id, so both opened and the extra menu closed the click before the action.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/web/src/views/ProductsSettingsView.vue | 42 ++++++++++++++-------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/views/ProductsSettingsView.vue b/apps/web/src/views/ProductsSettingsView.vue
index 3b8e819..5fcef1b 100644
--- a/apps/web/src/views/ProductsSettingsView.vue
+++ b/apps/web/src/views/ProductsSettingsView.vue
@@ -411,25 +411,25 @@ onMounted(load);
               </td>
               <td class="ops" @click.stop>
                 <UiDropdownMenu
-                  :open="menuId === p.id"
+                  :open="menuId === `d:${p.id}`"
                   align="end"
-                  @update:open="(v) => (menuId = v ? p.id : null)"
+                  @update:open="(v) => (menuId = v ? `d:${p.id}` : null)"
                 >
                   <template #trigger="{ toggle }">
                     <button
                       type="button"
-                      class="icon-btn"
+                      class="more"
                       aria-label="عملیات"
                       @click.stop="toggle"
                     >
-                      <UiIcon name="dots" :size="16" />
+                      <UiIcon name="dots-v" :size="16" />
                     </button>
                   </template>
-                  <button type="button" @click="goEdit(p.id)">ویرایش</button>
-                  <button type="button" @click="toggleActive(p)">
+                  <button type="button" @click.stop="goEdit(p.id)">ویرایش</button>
+                  <button type="button" @click.stop="toggleActive(p)">
                     {{ p.isActive ? 'غیرفعال کردن' : 'فعال کردن' }}
                   </button>
-                  <button type="button" class="danger" @click="removeProduct(p)">حذف</button>
+                  <button type="button" class="danger" @click.stop="removeProduct(p)">حذف</button>
                 </UiDropdownMenu>
               </td>
             </tr>
@@ -460,25 +460,25 @@ onMounted(load);
           </div>
           <div class="mob-side">
             <UiDropdownMenu
-              :open="menuId === p.id"
+              :open="menuId === `m:${p.id}`"
               align="end"
-              @update:open="(v) => (menuId = v ? p.id : null)"
+              @update:open="(v) => (menuId = v ? `m:${p.id}` : null)"
             >
               <template #trigger="{ toggle }">
                 <button
                   type="button"
-                  class="icon-btn"
+                  class="more"
                   aria-label="عملیات"
                   @click.stop="toggle"
                 >
                   <UiIcon name="dots-v" :size="16" />
                 </button>
               </template>
-              <button type="button" @click="goEdit(p.id)">ویرایش</button>
-              <button type="button" @click="toggleActive(p)">
+              <button type="button" @click.stop="goEdit(p.id)">ویرایش</button>
+              <button type="button" @click.stop="toggleActive(p)">
                 {{ p.isActive ? 'غیرفعال کردن' : 'فعال کردن' }}
               </button>
-              <button type="button" class="danger" @click="removeProduct(p)">حذف</button>
+              <button type="button" class="danger" @click.stop="removeProduct(p)">حذف</button>
             </UiDropdownMenu>
             <UiBadge :variant="p.isActive ? 'success' : 'neutral'" size="sm" dot>
               {{ p.isActive ? 'فعال' : 'غیرفعال' }}
@@ -680,6 +680,22 @@ tr:last-child td {
 .ops {
   width: 64px;
 }
+.more {
+  width: 32px;
+  height: 32px;
+  border: 0;
+  background: none;
+  color: #94a3b8;
+  border-radius: var(--radius);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  padding: 0;
+}
+.more:hover {
+  background: var(--accent-soft);
+  color: var(--accent);
+}
 .mob-list {
   display: none;
   gap: 0.65rem;