From ff52cf33d1ca684abc4b118723902d996f339951 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 22 Mar 2025 14:37:37 +0530
Subject: [PATCH] fix: button inside tooltip is triggered twice

---
 .../components/Activities/AttachmentArea.vue  | 38 +++++-----
 .../src/components/Activities/TaskArea.vue    |  8 +-
 .../src/components/Modals/AssignmentModal.vue | 31 ++++----
 .../components/Settings/InviteMemberPage.vue  | 20 ++---
 frontend/src/pages/Deal.vue                   | 60 ++++++++-------
 frontend/src/pages/Lead.vue                   | 76 ++++++++++---------
 6 files changed, 128 insertions(+), 105 deletions(-)

diff --git a/frontend/src/components/Activities/AttachmentArea.vue b/frontend/src/components/Activities/AttachmentArea.vue
index 52f4abb5..380869d9 100644
--- a/frontend/src/components/Activities/AttachmentArea.vue
+++ b/frontend/src/components/Activities/AttachmentArea.vue
@@ -43,25 +43,29 @@
                 attachment.is_private ? __('Make public') : __('Make private')
               "
             >
-              <Button
-                class="!size-5"
-                @click.stop="
-                  togglePrivate(attachment.name, attachment.is_private)
-                "
-              >
-                <FeatherIcon
-                  :name="attachment.is_private ? 'lock' : 'unlock'"
-                  class="size-3 text-ink-gray-7"
-                />
-              </Button>
+              <div>
+                <Button
+                  class="!size-5"
+                  @click.stop="
+                    togglePrivate(attachment.name, attachment.is_private)
+                  "
+                >
+                  <FeatherIcon
+                    :name="attachment.is_private ? 'lock' : 'unlock'"
+                    class="size-3 text-ink-gray-7"
+                  />
+                </Button>
+              </div>
             </Tooltip>
             <Tooltip :text="__('Delete attachment')">
-              <Button
-                class="!size-5"
-                @click.stop="() => deleteAttachment(attachment.name)"
-              >
-                <FeatherIcon name="trash-2" class="size-3 text-ink-gray-7" />
-              </Button>
+              <div>
+                <Button
+                  class="!size-5"
+                  @click.stop="() => deleteAttachment(attachment.name)"
+                >
+                  <FeatherIcon name="trash-2" class="size-3 text-ink-gray-7" />
+                </Button>
+              </div>
             </Tooltip>
           </div>
         </div>
diff --git a/frontend/src/components/Activities/TaskArea.vue b/frontend/src/components/Activities/TaskArea.vue
index 16fad217..1b479e6f 100644
--- a/frontend/src/components/Activities/TaskArea.vue
+++ b/frontend/src/components/Activities/TaskArea.vue
@@ -42,9 +42,11 @@
             @click.stop
           >
             <Tooltip :text="__('Change Status')">
-              <Button variant="ghosted" class="hover:bg-surface-gray-4">
-                <TaskStatusIcon :status="task.status" />
-              </Button>
+              <div>
+                <Button variant="ghosted" class="hover:bg-surface-gray-4">
+                  <TaskStatusIcon :status="task.status" />
+                </Button>
+              </div>
             </Tooltip>
           </Dropdown>
           <Dropdown
diff --git a/frontend/src/components/Modals/AssignmentModal.vue b/frontend/src/components/Modals/AssignmentModal.vue
index 2100255d..e0b99254 100644
--- a/frontend/src/components/Modals/AssignmentModal.vue
+++ b/frontend/src/components/Modals/AssignmentModal.vue
@@ -52,22 +52,21 @@
           v-for="assignee in assignees"
           :key="assignee.name"
         >
-          <Button
-            :label="getUser(assignee.name).full_name"
-            theme="gray"
-          >
-            <template #prefix>
-              <UserAvatar :user="assignee.name" size="sm" />
-            </template>
-            <template #suffix>
-              <FeatherIcon
-                v-if="assignee.name !== owner"
-                class="h-3.5"
-                name="x"
-                @click.stop="removeValue(assignee.name)"
-              />
-            </template>
-          </Button>
+          <div>
+            <Button :label="getUser(assignee.name).full_name" theme="gray">
+              <template #prefix>
+                <UserAvatar :user="assignee.name" size="sm" />
+              </template>
+              <template #suffix>
+                <FeatherIcon
+                  v-if="assignee.name !== owner"
+                  class="h-3.5"
+                  name="x"
+                  @click.stop="removeValue(assignee.name)"
+                />
+              </template>
+            </Button>
+          </div>
         </Tooltip>
       </div>
       <ErrorMessage class="mt-2" v-if="error" :message="__(error)" />
diff --git a/frontend/src/components/Settings/InviteMemberPage.vue b/frontend/src/components/Settings/InviteMemberPage.vue
index cb57e53c..296fbba7 100644
--- a/frontend/src/components/Settings/InviteMemberPage.vue
+++ b/frontend/src/components/Settings/InviteMemberPage.vue
@@ -51,15 +51,17 @@
               </div>
               <div>
                 <Tooltip text="Delete Invitation">
-                  <Button
-                    icon="x"
-                    variant="ghost"
-                    :loading="
-                      pendingInvitations.delete.loading &&
-                      pendingInvitations.delete.params.name === user.name
-                    "
-                    @click="pendingInvitations.delete.submit(user.name)"
-                  />
+                  <div>
+                    <Button
+                      icon="x"
+                      variant="ghost"
+                      :loading="
+                        pendingInvitations.delete.loading &&
+                        pendingInvitations.delete.params.name === user.name
+                      "
+                      @click="pendingInvitations.delete.submit(user.name)"
+                    />
+                  </div>
                 </Tooltip>
               </div>
             </li>
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 5341bda1..3a1d1225 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -75,38 +75,46 @@
           </Tooltip>
           <div class="flex gap-1.5">
             <Tooltip v-if="callEnabled" :text="__('Make a call')">
-              <Button class="h-7 w-7" @click="triggerCall">
-                <PhoneIcon class="h-4 w-4" />
-              </Button>
+              <div>
+                <Button class="h-7 w-7" @click="triggerCall">
+                  <PhoneIcon class="h-4 w-4" />
+                </Button>
+              </div>
             </Tooltip>
             <Tooltip :text="__('Send an email')">
-              <Button class="h-7 w-7">
-                <Email2Icon
-                  class="h-4 w-4"
-                  @click="
-                    deal.data.email
-                      ? openEmailBox()
-                      : errorMessage(__('No email set'))
-                  "
-                />
-              </Button>
+              <div>
+                <Button class="h-7 w-7">
+                  <Email2Icon
+                    class="h-4 w-4"
+                    @click="
+                      deal.data.email
+                        ? openEmailBox()
+                        : errorMessage(__('No email set'))
+                    "
+                  />
+                </Button>
+              </div>
             </Tooltip>
             <Tooltip :text="__('Go to website')">
-              <Button class="h-7 w-7">
-                <LinkIcon
-                  class="h-4 w-4"
-                  @click="
-                    deal.data.website
-                      ? openWebsite(deal.data.website)
-                      : errorMessage(__('No website set'))
-                  "
-                />
-              </Button>
+              <div>
+                <Button class="h-7 w-7">
+                  <LinkIcon
+                    class="h-4 w-4"
+                    @click="
+                      deal.data.website
+                        ? openWebsite(deal.data.website)
+                        : errorMessage(__('No website set'))
+                    "
+                  />
+                </Button>
+              </div>
             </Tooltip>
             <Tooltip :text="__('Attach a file')">
-              <Button class="size-7" @click="showFilesUploader = true">
-                <AttachmentIcon class="size-4" />
-              </Button>
+              <div>
+                <Button class="size-7" @click="showFilesUploader = true">
+                  <AttachmentIcon class="size-4" />
+                </Button>
+              </div>
             </Tooltip>
           </div>
         </div>
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index 8d6b7a08..a7a1e3d6 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -117,46 +117,54 @@
               </Tooltip>
               <div class="flex gap-1.5">
                 <Tooltip v-if="callEnabled" :text="__('Make a call')">
-                  <Button
-                    class="h-7 w-7"
-                    @click="
-                      () =>
-                        lead.data.mobile_no
-                          ? makeCall(lead.data.mobile_no)
-                          : errorMessage(__('No phone number set'))
-                    "
-                  >
-                    <PhoneIcon class="h-4 w-4" />
-                  </Button>
+                  <div>
+                    <Button
+                      class="h-7 w-7"
+                      @click="
+                        () =>
+                          lead.data.mobile_no
+                            ? makeCall(lead.data.mobile_no)
+                            : errorMessage(__('No phone number set'))
+                      "
+                    >
+                      <PhoneIcon class="h-4 w-4" />
+                    </Button>
+                  </div>
                 </Tooltip>
                 <Tooltip :text="__('Send an email')">
-                  <Button class="h-7 w-7">
-                    <Email2Icon
-                      class="h-4 w-4"
-                      @click="
-                        lead.data.email
-                          ? openEmailBox()
-                          : errorMessage(__('No email set'))
-                      "
-                    />
-                  </Button>
+                  <div>
+                    <Button class="h-7 w-7">
+                      <Email2Icon
+                        class="h-4 w-4"
+                        @click="
+                          lead.data.email
+                            ? openEmailBox()
+                            : errorMessage(__('No email set'))
+                        "
+                      />
+                    </Button>
+                  </div>
                 </Tooltip>
                 <Tooltip :text="__('Go to website')">
-                  <Button class="h-7 w-7">
-                    <LinkIcon
-                      class="h-4 w-4"
-                      @click="
-                        lead.data.website
-                          ? openWebsite(lead.data.website)
-                          : errorMessage(__('No website set'))
-                      "
-                    />
-                  </Button>
+                  <div>
+                    <Button class="h-7 w-7">
+                      <LinkIcon
+                        class="h-4 w-4"
+                        @click="
+                          lead.data.website
+                            ? openWebsite(lead.data.website)
+                            : errorMessage(__('No website set'))
+                        "
+                      />
+                    </Button>
+                  </div>
                 </Tooltip>
                 <Tooltip :text="__('Attach a file')">
-                  <Button class="h-7 w-7" @click="showFilesUploader = true">
-                    <AttachmentIcon class="h-4 w-4" />
-                  </Button>
+                  <div>
+                    <Button class="h-7 w-7" @click="showFilesUploader = true">
+                      <AttachmentIcon class="h-4 w-4" />
+                    </Button>
+                  </div>
                 </Tooltip>
               </div>
               <ErrorMessage :message="__(error)" />