From 59ee4babeb24151905b72aa8e7f95e4ef8397333 Mon Sep 17 00:00:00 2001
From: Akash K <57758277+amk-dev@users.noreply.github.com>
Date: Thu, 6 Oct 2022 16:06:14 +0530
Subject: [PATCH] fix: fix ref access when using v-for on Invite.vue (#2744)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
---
 .../collections/teams/Collection.vue          | 34 ++++++++++---------
 .../components/collections/teams/Folder.vue   | 34 ++++++++++---------
 .../src/components/teams/Invite.vue           |  5 +--
 3 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/packages/hoppscotch-app/src/components/collections/teams/Collection.vue b/packages/hoppscotch-app/src/components/collections/teams/Collection.vue
index f06d7a5d7..45df63dc2 100644
--- a/packages/hoppscotch-app/src/components/collections/teams/Collection.vue
+++ b/packages/hoppscotch-app/src/components/collections/teams/Collection.vue
@@ -8,7 +8,7 @@
       @drop="dragging = false"
       @dragleave="dragging = false"
       @dragend="dragging = false"
-      @contextmenu.prevent="options.tippy.show()"
+      @contextmenu.prevent="options!.tippy.show()"
     >
       <span
         class="flex items-center justify-center px-4 cursor-pointer"
@@ -62,7 +62,7 @@
             interactive
             trigger="click"
             theme="popover"
-            :on-shown="() => tippyActions.focus()"
+            :on-shown="() => tippyActions!.focus()"
           >
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
@@ -74,11 +74,11 @@
                 ref="tippyActions"
                 class="flex flex-col focus:outline-none"
                 tabindex="0"
-                @keyup.r="requestAction.$el.click()"
-                @keyup.n="folderAction.$el.click()"
-                @keyup.e="edit.$el.click()"
-                @keyup.delete="deleteAction.$el.click()"
-                @keyup.x="exportAction.$el.click()"
+                @keyup.r="requestAction!.$el.click()"
+                @keyup.n="folderAction!.$el.click()"
+                @keyup.e="edit!.$el.click()"
+                @keyup.delete="deleteAction!.$el.click()"
+                @keyup.x="exportAction!.$el.click()"
                 @keyup.escape="hide()"
               >
                 <SmartItem
@@ -246,6 +246,8 @@ import { moveRESTTeamRequest } from "~/helpers/backend/mutations/TeamRequest"
 import { useColorMode } from "@composables/theming"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
+import { TippyComponent } from "vue-tippy"
+import SmartItem from "@components/smart/Item.vue"
 
 export default defineComponent({
   props: {
@@ -275,13 +277,13 @@ export default defineComponent({
 
     return {
       // Template refs
-      tippyActions: ref<any | null>(null),
-      options: ref<any | null>(null),
-      requestAction: ref<any | null>(null),
-      folderAction: ref<any | null>(null),
-      edit: ref<any | null>(null),
-      deleteAction: ref<any | null>(null),
-      exportAction: ref<any | null>(null),
+      tippyActions: ref<TippyComponent | null>(null),
+      options: ref<TippyComponent | null>(null),
+      requestAction: ref<typeof SmartItem | null>(null),
+      folderAction: ref<typeof SmartItem | null>(null),
+      edit: ref<typeof SmartItem | null>(null),
+      deleteAction: ref<typeof SmartItem | null>(null),
+      exportAction: ref<typeof SmartItem | null>(null),
       exportLoading: ref<boolean>(false),
       t,
       toast: useToast(),
@@ -332,7 +334,7 @@ export default defineComponent({
         this.toast.error(this.t("error.something_went_wrong").toString())
         console.log(result.left)
         this.exportLoading = false
-        this.options.tippy().hide()
+        this.options!.tippy.hide()
 
         return
       }
@@ -358,7 +360,7 @@ export default defineComponent({
 
       this.exportLoading = false
 
-      this.options.tippy().hide()
+      this.options!.tippy.hide()
     },
     editRequest(event: any) {
       this.$emit("edit-request", event)
diff --git a/packages/hoppscotch-app/src/components/collections/teams/Folder.vue b/packages/hoppscotch-app/src/components/collections/teams/Folder.vue
index 7b2a1a94a..d5eee2df0 100644
--- a/packages/hoppscotch-app/src/components/collections/teams/Folder.vue
+++ b/packages/hoppscotch-app/src/components/collections/teams/Folder.vue
@@ -8,7 +8,7 @@
       @drop="dragging = false"
       @dragleave="dragging = false"
       @dragend="dragging = false"
-      @contextmenu.prevent="options.tippy.show()"
+      @contextmenu.prevent="options!.tippy.show()"
     >
       <span
         class="flex items-center justify-center px-4 cursor-pointer"
@@ -52,7 +52,7 @@
             interactive
             trigger="click"
             theme="popover"
-            :on-shown="() => tippyActions.focus()"
+            :on-shown="() => tippyActions!.focus()"
           >
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
@@ -64,11 +64,11 @@
                 ref="tippyActions"
                 class="flex flex-col focus:outline-none"
                 tabindex="0"
-                @keyup.r="requestAction.$el.click()"
-                @keyup.n="folderAction.$el.click()"
-                @keyup.e="edit.$el.click()"
-                @keyup.delete="deleteAction.$el.click()"
-                @keyup.x="exportAction.$el.click()"
+                @keyup.r="requestAction!.$el.click()"
+                @keyup.n="folderAction!.$el.click()"
+                @keyup.e="edit!.$el.click()"
+                @keyup.delete="deleteAction!.$el.click()"
+                @keyup.x="exportAction!.$el.click()"
                 @keyup.escape="hide()"
               >
                 <SmartItem
@@ -233,6 +233,8 @@ import { moveRESTTeamRequest } from "~/helpers/backend/mutations/TeamRequest"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import { useColorMode } from "@composables/theming"
+import { TippyComponent } from "vue-tippy"
+import SmartItem from "@components/smart/Item.vue"
 
 export default defineComponent({
   name: "Folder",
@@ -262,13 +264,13 @@ export default defineComponent({
   setup() {
     return {
       // Template refs
-      tippyActions: ref<any | null>(null),
-      options: ref<any | null>(null),
-      requestAction: ref<any | null>(null),
-      folderAction: ref<any | null>(null),
-      edit: ref<any | null>(null),
-      deleteAction: ref<any | null>(null),
-      exportAction: ref<any | null>(null),
+      tippyActions: ref<TippyComponent | null>(null),
+      options: ref<TippyComponent | null>(null),
+      requestAction: ref<typeof SmartItem | null>(null),
+      folderAction: ref<typeof SmartItem | null>(null),
+      edit: ref<typeof SmartItem | null>(null),
+      deleteAction: ref<typeof SmartItem | null>(null),
+      exportAction: ref<typeof SmartItem | null>(null),
       exportLoading: ref<boolean>(false),
       toast: useToast(),
       t: useI18n(),
@@ -317,7 +319,7 @@ export default defineComponent({
         this.toast.error(this.t("error.something_went_wrong").toString())
         console.log(result.left)
         this.exportLoading = false
-        this.options.tippy().hide()
+        this.options!.tippy.hide()
 
         return
       }
@@ -343,7 +345,7 @@ export default defineComponent({
 
       this.exportLoading = false
 
-      this.options.tippy().hide()
+      this.options!.tippy.hide()
     },
     toggleShowChildren() {
       if (this.$props.saveRequest)
diff --git a/packages/hoppscotch-app/src/components/teams/Invite.vue b/packages/hoppscotch-app/src/components/teams/Invite.vue
index 4c9bf132e..631c71cf2 100644
--- a/packages/hoppscotch-app/src/components/teams/Invite.vue
+++ b/packages/hoppscotch-app/src/components/teams/Invite.vue
@@ -143,7 +143,7 @@
                 interactive
                 trigger="click"
                 theme="popover"
-                :on-shown="() => tippyActions.focus()"
+                :on-shown="() => tippyActions![index].focus()"
               >
                 <span class="select-wrapper">
                   <input
@@ -364,6 +364,7 @@ import IconMailCheck from "~icons/lucide/mail-check"
 import IconCircleDot from "~icons/lucide/circle-dot"
 import IconCircle from "~icons/lucide/circle"
 import IconArrowLeft from "~icons/lucide/arrow-left"
+import { TippyComponent } from "vue-tippy"
 
 const t = useI18n()
 
@@ -372,7 +373,7 @@ const toast = useToast()
 const colorMode = useColorMode()
 
 // Template refs
-const tippyActions = ref<any | null>(null)
+const tippyActions = ref<TippyComponent[] | null>(null)
 
 const props = defineProps({
   show: Boolean,