From 6b6f85cc7e9d865fbb6175190bce05ccdfed65d6 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Mon, 1 Nov 2021 15:25:19 +0530
Subject: [PATCH] fix: hide popover on click on update role

---
 .../hoppscotch-app/components/teams/Edit.vue  | 30 ++++++++++++++-----
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/packages/hoppscotch-app/components/teams/Edit.vue b/packages/hoppscotch-app/components/teams/Edit.vue
index e4fd4032d..7f0ef0ee3 100644
--- a/packages/hoppscotch-app/components/teams/Edit.vue
+++ b/packages/hoppscotch-app/components/teams/Edit.vue
@@ -88,7 +88,7 @@
               />
               <span>
                 <tippy
-                  :ref="`memberOptions-${index}`"
+                  ref="memberOptions"
                   interactive
                   trigger="click"
                   theme="popover"
@@ -117,15 +117,30 @@
                   </template>
                   <SmartItem
                     label="OWNER"
-                    @click.native="updateMemberRole(index, 'OWNER')"
+                    @click.native="
+                      () => {
+                        updateMemberRole(member.user.uid, 'OWNER')
+                        memberOptions[index].tippy().hide()
+                      }
+                    "
                   />
                   <SmartItem
                     label="EDITOR"
-                    @click.native="updateMemberRole(index, 'EDITOR')"
+                    @click.native="
+                      () => {
+                        updateMemberRole(member.user.uid, 'EDITOR')
+                        memberOptions[index].tippy().hide()
+                      }
+                    "
                   />
                   <SmartItem
                     label="VIEWER"
-                    @click.native="updateMemberRole(index, 'VIEWER')"
+                    @click.native="
+                      () => {
+                        updateMemberRole(member.user.uid, 'VIEWER')
+                        memberOptions[index].tippy().hide()
+                      }
+                    "
                   />
                 </tippy>
               </span>
@@ -194,6 +209,8 @@ const emit = defineEmits<{
   (e: "hide-modal"): void
 }>()
 
+const memberOptions = ref<any | null>(null)
+
 const props = defineProps<{
   show: boolean
   editingTeam: {
@@ -261,9 +278,8 @@ const teamDetails = useGQLQuery<GetTeamQuery, GetTeamQueryVariables, "">({
   }),
 })
 
-const updateMemberRole = (id: number, role: TeamMemberRole) => {
-  members.value[id].role = role
-  // $refs[`memberOptions-${id}`][0].tippy().hide()
+const updateMemberRole = (userID: string, role: TeamMemberRole) => {
+  members.value[userID].role = role
 }
 
 const removeExistingTeamMember = async (userID: string) => {