refactor: improved popover actions, key bindings

packages/hoppscotch-app/src/components/app/Footer.vue

@@ -22,7 +22,7 @@
           }"
           @click="ZEN_MODE = !ZEN_MODE"
         />
-        <tippy interactive trigger="click" theme="popover" arrow>
+        <tippy interactive trigger="click" theme="popover">
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('settings.interceptor')"
@@ -35,11 +35,9 @@
       </div>
       <div class="flex">
         <tippy
-          ref="options"
           interactive
           trigger="click"
           theme="popover"
-          arrow
           :on-shown="() => tippyActions.focus()"
         >
           <ButtonSecondary
@@ -52,7 +50,6 @@
               ref="tippyActions"
               class="flex flex-col focus:outline-none"
               tabindex="0"
-              role="menu"
               @keyup.d="documentation.$el.click()"
               @keyup.s="shortcuts.$el.click()"
               @keyup.c="chat.$el.click()"
@@ -284,5 +281,4 @@ const tippyActions = ref<any | null>(null)
 const documentation = ref<any | null>(null)
 const shortcuts = ref<any | null>(null)
 const chat = ref<any | null>(null)
-const options = ref<any | null>(null)
 </script>

packages/hoppscotch-app/src/components/app/Header.vue

@@ -63,7 +63,6 @@
               interactive
               trigger="click"
               theme="popover"
-              arrow
               :on-shown="() => tippyActions.focus()"
             >
               <ProfilePicture
@@ -103,7 +102,6 @@
                   ref="tippyActions"
                   class="flex flex-col focus:outline-none"
                   tabindex="0"
-                  role="menu"
                   @keyup.enter="profile.$el.click()"
                   @keyup.s="settings.$el.click()"
                   @keyup.l="logout.$el.click()"

packages/hoppscotch-app/src/components/collections/ChooseType.vue

@@ -19,8 +19,8 @@
             interactive
             trigger="click"
             theme="popover"
-            arrow
             placement="bottom"
+            :on-shown="() => tippyActions.focus()"
           >
             <span
               v-tippy="{ theme: 'tooltip' }"
@@ -41,9 +41,9 @@
             </span>
             <template #content="{ hide }">
               <div
-                class="flex flex-col"
+                ref="tippyActions"
+                class="flex flex-col focus:outline-none"
                 tabindex="0"
-                role="menu"
                 @keyup.escape="hide()"
               >
                 <SmartItem
@@ -93,6 +93,8 @@ type CollectionTabs = "my-collections" | "team-collections"
 
 const t = useI18n()
 
+// Template refs
+const tippyActions = ref<any | null>(null)
 const selectedCollectionTab = ref<CollectionTabs>("my-collections")
 
 defineProps<{

packages/hoppscotch-app/src/components/collections/ImportExport.vue

@@ -17,7 +17,7 @@
     </template>
     <template #body>
       <div v-if="importerType !== null" class="flex flex-col">
-        <div class="flex flex-col pb-6">
+        <div class="flex flex-col pb-4">
           <div
             v-for="(step, index) in importerSteps"
             :key="`step-${index}`"
@@ -37,13 +37,15 @@
                   {{ t(`${step.metadata.caption}`) }}
                 </span>
               </p>
-              <p class="flex flex-col ml-10">
+              <p
+                class="flex flex-col ml-10 border border-dashed rounded border-dividerDark"
+              >
                 <input
                   id="inputChooseFileToImportFrom"
                   ref="inputChooseFileToImportFrom"
                   name="inputChooseFileToImportFrom"
                   type="file"
-                  class="cursor-pointer transition file:transition file:cursor-pointer text-secondary hover:text-secondaryDark file:mr-2 file:py-2 file:px-4 file:rounded file:border-0 file:text-secondary hover:file:text-secondaryDark file:bg-primaryLight hover:file:bg-primaryDark"
+                  class="p-4 cursor-pointer transition file:transition file:cursor-pointer text-secondary hover:text-secondaryDark file:mr-2 file:py-2 file:px-4 file:rounded file:border-0 file:text-secondary hover:file:text-secondaryDark file:bg-primaryLight hover:file:bg-primaryDark"
                   :accept="step.metadata.acceptedFileTypes"
                   @change="onFileChange"
                 />

packages/hoppscotch-app/src/components/collections/graphql/Collection.vue

@@ -57,7 +57,6 @@
             interactive
             trigger="click"
             theme="popover"
-            arrow
             :on-shown="() => tippyActions.focus()"
           >
             <ButtonSecondary
@@ -65,13 +64,11 @@
               :title="t('action.more')"
               :icon="IconMoreVertical"
             />
-
             <template #content="{ hide }">
               <div
                 ref="tippyActions"
                 class="flex flex-col focus:outline-none"
                 tabindex="0"
-                role="menu"
                 @keyup.r="requestAction.$el.click()"
                 @keyup.n="folderAction.$el.click()"
                 @keyup.e="edit.$el.click()"
@@ -243,6 +240,7 @@ const emit = defineEmits<{
   (e: "edit-collection"): void
 }>()
 
+// Template refs
 const tippyActions = ref<any | null>(null)
 const options = ref<any | null>(null)
 const requestAction = ref<any | null>(null)

packages/hoppscotch-app/src/components/collections/graphql/Folder.vue

@@ -49,7 +49,6 @@
             interactive
             trigger="click"
             theme="popover"
-            arrow
             :on-shown="() => tippyActions.focus()"
           >
             <ButtonSecondary
@@ -62,7 +61,6 @@
                 ref="tippyActions"
                 class="flex flex-col focus:outline-none"
                 tabindex="0"
-                role="menu"
                 @keyup.r="requestAction.$el.click()"
                 @keyup.n="folderAction.$el.click()"
                 @keyup.e="edit.$el.click()"
@@ -231,6 +229,7 @@ const emit = defineEmits([
   "duplicate-request",
 ])
 
+// Template refs
 const tippyActions = ref<any | null>(null)
 const options = ref<any | null>(null)
 const requestAction = ref<any | null>(null)

packages/hoppscotch-app/src/components/collections/graphql/ImportExport.vue

@@ -8,17 +8,18 @@
   >
     <template #actions>
       <span>
-        <tippy interactive trigger="click" theme="popover" arrow>
+        <tippy interactive trigger="click" theme="popover">
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('action.more')"
             :icon="IconMoreVertical"
+            :on-shown="() => tippyActions.focus()"
           />
           <template #content="{ hide }">
             <div
-              class="flex flex-col"
+              ref="tippyActions"
+              class="flex flex-col focus:outline-none"
               tabindex="0"
-              role="menu"
               @keyup.escape="hide()"
             >
               <SmartItem
@@ -122,6 +123,7 @@ const collections = useReadonlyStream(graphqlCollections$, [])
 const currentUser = useReadonlyStream(currentUser$, null)
 
 // Template refs
+const tippyActions = ref<any | null>(null)
 const inputChooseFileToImportFrom = ref<HTMLInputElement>()
 
 const collectionJson = computed(() => {

packages/hoppscotch-app/src/components/collections/graphql/Request.vue

@@ -42,7 +42,6 @@
             interactive
             trigger="click"
             theme="popover"
-            arrow
             :on-shown="() => tippyActions.focus()"
           >
             <ButtonSecondary
@@ -55,7 +54,6 @@
                 ref="tippyActions"
                 class="flex flex-col focus:outline-none"
                 tabindex="0"
-                role="menu"
                 @keyup.e="edit.$el.click()"
                 @keyup.d="duplicate.$el.click()"
                 @keyup.delete="deleteAction.$el.click()"
@@ -136,6 +134,7 @@ import { cloneDeep } from "lodash-es"
 import { removeGraphqlRequest } from "~/newstore/collections"
 import { setGQLSession } from "~/newstore/GQLSession"
 
+// Template refs
 const tippyActions = ref<any | null>(null)
 const options = ref<any | null>(null)
 const edit = ref<any | null>(null)

packages/hoppscotch-app/src/components/collections/my/Collection.vue

@@ -58,7 +58,6 @@
             interactive
             trigger="click"
             theme="popover"
-            arrow
             :on-shown="() => tippyActions.focus()"
           >
             <ButtonSecondary
@@ -71,13 +70,12 @@
                 ref="tippyActions"
                 class="flex flex-col focus:outline-none"
                 tabindex="0"
-                role="menu"
                 @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="options.tippy().hide()"
+                @keyup.escape="hide()"
               >
                 <SmartItem
                   ref="requestAction"
@@ -265,6 +263,7 @@ export default defineComponent({
       toast: useToast(),
       t: useI18n(),
 
+      // Template refs
       tippyActions: ref<any | null>(null),
       options: ref<any | null>(null),
       requestAction: ref<any | null>(null),

packages/hoppscotch-app/src/components/collections/my/Folder.vue

@@ -49,7 +49,6 @@
             interactive
             trigger="click"
             theme="popover"
-            arrow
             :on-shown="() => tippyActions.focus()"
           >
             <ButtonSecondary
@@ -62,7 +61,6 @@
                 ref="tippyActions"
                 class="flex flex-col focus:outline-none"
                 tabindex="0"
-                role="menu"
                 @keyup.r="requestAction.$el.click()"
                 @keyup.n="folderAction.$el.click()"
                 @keyup.e="edit.$el.click()"
@@ -253,6 +251,7 @@ export default defineComponent({
     const t = useI18n()
 
     return {
+      // Template refs
       tippyActions: ref<any | null>(null),
       options: ref<any | null>(null),
       requestAction: ref<any | null>(null),

packages/hoppscotch-app/src/components/collections/my/Request.vue

@@ -61,7 +61,6 @@
             interactive
             trigger="click"
             theme="popover"
-            arrow
             :on-shown="() => tippyActions.focus()"
           >
             <ButtonSecondary
@@ -74,7 +73,6 @@
                 ref="tippyActions"
                 class="flex flex-col focus:outline-none"
                 tabindex="0"
-                role="menu"
                 @keyup.e="edit.$el.click()"
                 @keyup.d="duplicate.$el.click()"
                 @keyup.delete="deleteAction.$el.click()"

packages/hoppscotch-app/src/components/collections/teams/Collection.vue

@@ -62,7 +62,6 @@
             interactive
             trigger="click"
             theme="popover"
-            arrow
             :on-shown="() => tippyActions.focus()"
           >
             <ButtonSecondary
@@ -75,7 +74,6 @@
                 ref="tippyActions"
                 class="flex flex-col focus:outline-none"
                 tabindex="0"
-                role="menu"
                 @keyup.r="requestAction.$el.click()"
                 @keyup.n="folderAction.$el.click()"
                 @keyup.e="edit.$el.click()"
@@ -276,6 +274,7 @@ export default defineComponent({
     const t = useI18n()
 
     return {
+      // Template refs
       tippyActions: ref<any | null>(null),
       options: ref<any | null>(null),
       requestAction: ref<any | null>(null),

packages/hoppscotch-app/src/components/collections/teams/Folder.vue

@@ -52,7 +52,6 @@
             interactive
             trigger="click"
             theme="popover"
-            arrow
             :on-shown="() => tippyActions.focus()"
           >
             <ButtonSecondary
@@ -65,13 +64,12 @@
                 ref="tippyActions"
                 class="flex flex-col focus:outline-none"
                 tabindex="0"
-                role="menu"
                 @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="options.tippy().hide()"
+                @keyup.escape="hide()"
               >
                 <SmartItem
                   ref="requestAction"
@@ -263,6 +261,7 @@ export default defineComponent({
   ],
   setup() {
     return {
+      // Template refs
       tippyActions: ref<any | null>(null),
       options: ref<any | null>(null),
       requestAction: ref<any | null>(null),

packages/hoppscotch-app/src/components/collections/teams/Request.vue

@@ -62,7 +62,6 @@
             interactive
             trigger="click"
             theme="popover"
-            arrow
             :on-shown="() => tippyActions.focus()"
           >
             <ButtonSecondary
@@ -75,7 +74,6 @@
                 ref="tippyActions"
                 class="flex flex-col focus:outline-none"
                 tabindex="0"
-                role="menu"
                 @keyup.e="edit.$el.click()"
                 @keyup.d="duplicate.$el.click()"
                 @keyup.delete="deleteAction.$el.click()"

packages/hoppscotch-app/src/components/environments/Environment.vue

@@ -23,7 +23,6 @@
         interactive
         trigger="click"
         theme="popover"
-        arrow
         :on-shown="() => tippyActions.focus()"
       >
         <ButtonSecondary
@@ -36,7 +35,6 @@
             ref="tippyActions"
             class="flex flex-col focus:outline-none"
             tabindex="0"
-            role="menu"
             @keyup.e="edit.$el.click()"
             @keyup.d="duplicate.$el.click()"
             @keyup.delete="
@@ -127,6 +125,7 @@ const emit = defineEmits<{
 
 const confirmRemove = ref(false)
 
+// Template refs
 const tippyActions = ref<any | null>(null)
 const options = ref<any | null>(null)
 const edit = ref<any | null>(null)

packages/hoppscotch-app/src/components/environments/ImportExport.vue

@@ -8,7 +8,12 @@
   >
     <template #actions>
       <span>
-        <tippy ref="options" interactive trigger="click" theme="popover" arrow>
+        <tippy
+          interactive
+          trigger="click"
+          theme="popover"
+          :on-shown="() => tippyActions.focus()"
+        >
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('action.more')"
@@ -16,9 +21,9 @@
           />
           <template #content="{ hide }">
             <div
-              class="flex flex-col"
+              ref="tippyActions"
+              class="flex flex-col focus:outline-none"
               tabindex="0"
-              role="menu"
               @keyup.escape="hide()"
             >
               <SmartItem
@@ -123,7 +128,7 @@ const environments = useReadonlyStream(environments$, [])
 const currentUser = useReadonlyStream(currentUser$, null)
 
 // Template refs
-const options = ref<any>()
+const tippyActions = ref<any | null>(null)
 const inputChooseFileToImportFrom = ref<HTMLInputElement>()
 
 const environmentJson = computed(() => {

packages/hoppscotch-app/src/components/environments/index.vue

@@ -1,7 +1,12 @@
 <template>
   <div>
     <div class="sticky top-0 z-10 flex flex-col rounded-t bg-primary">
-      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
+      <tippy
+        interactive
+        trigger="click"
+        theme="popover"
+        :on-shown="() => tippyActions.focus()"
+      >
         <span
           v-tippy="{ theme: 'tooltip' }"
           :title="`${t('environment.select')}`"
@@ -20,9 +25,9 @@
         </span>
         <template #content="{ hide }">
           <div
-            class="flex flex-col"
+            ref="tippyActions"
+            class="flex flex-col focus:outline-none"
             tabindex="0"
-            role="menu"
             @keyup.escape="hide()"
           >
             <SmartItem
@@ -144,8 +149,6 @@ import {
 
 const t = useI18n()
 
-const options = ref<any | null>(null)
-
 const colorMode = useColorMode()
 
 const globalEnv = useReadonlyStream(globalEnv$, [])
@@ -163,6 +166,8 @@ const selectedEnvironmentIndex = useStream(
   setCurrentEnvironment
 )
 
+// Template refs
+const tippyActions = ref<any | null>(null)
 const showModalImportExport = ref(false)
 const showModalDetails = ref(false)
 const action = ref<"new" | "edit">("edit")

packages/hoppscotch-app/src/components/graphql/Authorization.vue

@@ -8,20 +8,19 @@
           {{ t("authorization.type") }}
         </label>
         <tippy
-          ref="authTypeOptions"
           interactive
           trigger="click"
           theme="popover"
-          arrow
+          :on-shown="() => tippyActions.focus()"
         >
           <span class="select-wrapper">
             <ButtonSecondary class="pr-8 ml-2 rounded-none" :label="authName" />
           </span>
           <template #content="{ hide }">
             <div
-              class="flex flex-col space-y-1"
+              ref="tippyActions"
+              class="flex flex-col focus:outline-none"
               tabindex="0"
-              role="menu"
               @keyup.escape="hide()"
             >
               <SmartItem
@@ -175,11 +174,10 @@
                 {{ t("authorization.pass_key_by") }}
               </label>
               <tippy
-                ref="addToOptions"
                 interactive
                 trigger="click"
                 theme="popover"
-                arrow
+                :on-shown="() => authTippyActions.focus()"
               >
                 <span class="select-wrapper">
                   <ButtonSecondary
@@ -189,9 +187,9 @@
                 </span>
                 <template #content="{ hide }">
                   <div
-                    class="flex flex-col"
+                    ref="authTippyActions"
+                    class="flex flex-col focus:outline-none"
                     tabindex="0"
-                    role="menu"
                     @keyup.escape="hide()"
                   >
                     <SmartItem
@@ -301,6 +299,8 @@ const clearContent = () => {
     authActive: true,
   }
 }
-const authTypeOptions = ref<any | null>(null)
+
-const addToOptions = ref<any | null>(null)
+// Template refs
+const tippyActions = ref<any | null>(null)
+const authTippyActions = ref<any | null>(null)
 </script>

packages/hoppscotch-app/src/components/graphql/Response.vue

@@ -23,14 +23,18 @@
             @click.prevent="linewrapEnabled = !linewrapEnabled"
           />
           <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
+            v-tippy="{ theme: 'tooltip', allowHTML: true }"
-            :title="t('action.download_file')"
+            :title="`${t(
+              'action.download_file'
+            )} <xmp>${getSpecialKey()}</xmp><xmp>J</xmp>`"
             :icon="downloadResponseIcon"
             @click="downloadResponse"
           />
           <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
+            v-tippy="{ theme: 'tooltip', allowHTML: true }"
-            :title="t('action.copy')"
+            :title="`${t(
+              'action.copy'
+            )} <xmp>${getSpecialKey()}</xmp><xmp>.</xmp>`"
             :icon="copyResponseIcon"
             @click="copyResponse"
           />
@@ -86,6 +90,8 @@ import { useReadonlyStream } from "@composables/stream"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import { gqlResponse$ } from "~/newstore/GQLSession"
+import { defineActionHandler } from "~/helpers/actions"
+import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 
 const t = useI18n()
 
@@ -141,4 +147,7 @@ const downloadResponse = () => {
     URL.revokeObjectURL(url)
   }, 1000)
 }
+
+defineActionHandler("response.file.download", () => downloadResponse())
+defineActionHandler("response.copy", () => copyResponse())
 </script>

packages/hoppscotch-app/src/components/http/Authorization.vue

@@ -8,20 +8,19 @@
           {{ t("authorization.type") }}
         </label>
         <tippy
-          ref="authTypeOptions"
           interactive
           trigger="click"
           theme="popover"
-          arrow
+          :on-shown="() => tippyActions.focus()"
         >
           <span class="select-wrapper">
             <ButtonSecondary class="pr-8 ml-2 rounded-none" :label="authName" />
           </span>
           <template #content="{ hide }">
             <div
-              class="flex flex-col"
+              ref="tippyActions"
+              class="flex flex-col focus:outline-none"
               tabindex="0"
-              role="menu"
               @keyup.escape="hide()"
             >
               <SmartItem
@@ -172,11 +171,10 @@
                 {{ t("authorization.pass_key_by") }}
               </label>
               <tippy
-                ref="addToOptions"
                 interactive
                 trigger="click"
                 theme="popover"
-                arrow
+                :on-shown="() => authTippyActions.focus()"
               >
                 <span class="select-wrapper">
                   <ButtonSecondary
@@ -186,9 +184,9 @@
                 </span>
                 <template #content="{ hide }">
                   <div
-                    class="flex flex-col"
+                    ref="authTippyActions"
+                    class="flex flex-col focus:outline-none"
                     tabindex="0"
-                    role="menu"
                     @keyup.escape="hide()"
                   >
                     <SmartItem
@@ -297,6 +295,8 @@ const clearContent = () => {
     authActive: true,
   }
 }
-const authTypeOptions = ref<any | null>(null)
+
-const addToOptions = ref<any | null>(null)
+// Template refs
+const tippyActions = ref<any | null>(null)
+const authTippyActions = ref<any | null>(null)
 </script>

packages/hoppscotch-app/src/components/http/Body.vue

@@ -7,7 +7,12 @@
         <label class="font-semibold text-secondaryLight">
           {{ t("request.content_type") }}
         </label>
-        <tippy interactive trigger="click" theme="popover" arrow>
+        <tippy
+          interactive
+          trigger="click"
+          theme="popover"
+          :on-shown="() => tippyActions.focus()"
+        >
           <span class="select-wrapper">
             <ButtonSecondary
               :label="contentType || t('state.none')"
@@ -16,9 +21,9 @@
           </span>
           <template #content="{ hide }">
             <div
-              class="flex flex-col space-y-1 divide-y divide-dividerLight"
+              ref="tippyActions"
+              class="flex flex-col space-y-2 divide-y focus:outline-none divide-dividerLight"
               tabindex="0"
-              role="menu"
               @keyup.escape="hide()"
             >
               <SmartItem
@@ -122,7 +127,7 @@ import IconDone from "~icons/lucide/check"
 import IconInfo from "~icons/lucide/info"
 import IconRefreshCW from "~icons/lucide/refresh-cw"
 import IconExternalLink from "~icons/lucide/external-link"
-import { computed } from "vue"
+import { computed, ref } from "vue"
 import { pipe } from "fp-ts/function"
 import * as A from "fp-ts/Array"
 import * as O from "fp-ts/Option"
@@ -177,4 +182,7 @@ const isContentTypeAlreadyExist = () => {
     A.some((e) => e.key.toLowerCase() === "content-type")
   )
 }
+
+// Template refs
+const tippyActions = ref<any | null>(null)
 </script>

packages/hoppscotch-app/src/components/http/CodegenModal.vue

@@ -11,12 +11,11 @@
           {{ t("request.choose_language") }}
         </label>
         <tippy
-          ref="options"
-          placement="bottom"
           interactive
           trigger="click"
           theme="popover"
-          arrow
+          placement="bottom"
+          :on-shown="() => tippyActions.focus()"
         >
           <span class="select-wrapper">
             <ButtonSecondary
@@ -39,9 +38,9 @@
                 />
               </div>
               <div
-                class="flex flex-col"
+                ref="tippyActions"
+                class="flex flex-col focus:outline-none"
                 tabindex="0"
-                role="menu"
                 @keyup.escape="hide()"
               >
                 <SmartItem
@@ -148,8 +147,6 @@ const emit = defineEmits<{
 
 const toast = useToast()
 
-const options = ref<any | null>(null)
-
 const request = ref(getRESTRequest())
 const codegenType = ref<CodegenName>("shell-curl")
 const errorState = ref(false)
@@ -195,6 +192,8 @@ const requestCode = computed(() => {
   }
 })
 
+// Template refs
+const tippyActions = ref<any | null>(null)
 const generatedCode = ref<any | null>(null)
 
 useCodemirror(generatedCode, requestCode, {

packages/hoppscotch-app/src/components/http/Request.vue

@@ -8,11 +8,9 @@
       <div class="relative flex">
         <label for="method">
           <tippy
-            ref="methodOptions"
             interactive
             trigger="click"
             theme="popover"
-            arrow
             :on-shown="() => methodTippyActions.focus()"
           >
             <span class="select-wrapper">
@@ -30,7 +28,6 @@
                 ref="methodTippyActions"
                 class="flex flex-col focus:outline-none"
                 tabindex="0"
-                role="menu"
                 @keyup.escape="hide()"
               >
                 <SmartItem
@@ -69,11 +66,9 @@
       />
       <span class="flex">
         <tippy
-          ref="sendOptions"
           interactive
           trigger="click"
           theme="popover"
-          arrow
           :on-shown="() => sendTippyActions.focus()"
         >
           <ButtonPrimary
@@ -86,7 +81,6 @@
               ref="sendTippyActions"
               class="flex flex-col focus:outline-none"
               tabindex="0"
-              role="menu"
               @keyup.c="curl.$el.click()"
               @keyup.s="show.$el.click()"
               @keyup.delete="clearAll.$el.click()"
@@ -133,7 +127,7 @@
         </tippy>
       </span>
       <span
-        class="flex ml-2 border rounded border-dividerLight hover:border-dividerDark transition"
+        class="flex ml-2 border rounded transition border-dividerLight hover:border-dividerDark"
       >
         <ButtonSecondary
           class="flex-1 rounded rounded-r-none"
@@ -144,11 +138,9 @@
         />
         <span class="flex">
           <tippy
-            ref="saveOptions"
             interactive
             trigger="click"
             theme="popover"
-            arrow
             :on-shown="() => saveTippyActions.focus()"
           >
             <ButtonSecondary
@@ -171,7 +163,6 @@
                 ref="saveTippyActions"
                 class="flex flex-col focus:outline-none"
                 tabindex="0"
-                role="menu"
                 @keyup.c="copyRequestAction.$el.click()"
                 @keyup.s="saveRequestAction.$el.click()"
                 @keyup.escape="hide()"
@@ -307,9 +298,6 @@ const showSaveRequestModal = ref(false)
 const hasNavigatorShare = !!navigator.share
 
 // Template refs
-const methodOptions = ref<any | null>(null)
-const saveOptions = ref<any | null>(null)
-const sendOptions = ref<any | null>(null)
 const methodTippyActions = ref<any | null>(null)
 const sendTippyActions = ref<any | null>(null)
 const saveTippyActions = ref<any | null>(null)

packages/hoppscotch-app/src/components/lenses/renderers/JSONLensRenderer.vue

@@ -97,11 +97,10 @@
         class="flex items-center"
       >
         <tippy
-          ref="outlineOptions"
           interactive
           trigger="click"
           theme="popover"
-          arrow
+          :on-shown="() => tippyActions.focus()"
         >
           <div v-if="item.kind === 'RootObject'" class="outline-item">{}</div>
           <div v-if="item.kind === 'RootArray'" class="outline-item">[]</div>
@@ -117,9 +116,9 @@
             >
               <div
                 v-if="item.kind === 'ArrayMember'"
-                class="flex flex-col"
+                ref="tippyActions"
+                class="flex flex-col focus:outline-none"
                 tabindex="0"
-                role="menu"
                 @keyup.escape="hide()"
               >
                 <SmartItem
@@ -136,9 +135,9 @@
               </div>
               <div
                 v-if="item.kind === 'ObjectMember'"
-                class="flex flex-col"
+                ref="tippyActions"
+                class="flex flex-col focus:outline-none"
                 tabindex="0"
-                role="menu"
                 @keyup.escape="hide()"
               >
                 <SmartItem
@@ -156,8 +155,8 @@
             </div>
             <div
               v-if="item.kind === 'RootObject'"
+              ref="tippyActions"
               class="flex flex-col"
-              role="menu"
             >
               <SmartItem
                 label="{}"
@@ -171,8 +170,8 @@
             </div>
             <div
               v-if="item.kind === 'RootArray'"
+              ref="tippyActions"
               class="flex flex-col"
-              role="menu"
             >
               <SmartItem
                 label="[]"
@@ -321,7 +320,8 @@ const { downloadIcon, downloadResponse } = useDownloadResponse(
   jsonBodyText
 )
 
-const outlineOptions = ref<any | null>(null)
+// Template refs
+const tippyActions = ref<any | null>(null)
 const jsonResponse = ref<any | null>(null)
 const linewrapEnabled = ref(true)
 

packages/hoppscotch-app/src/components/realtime/Communication.vue

@@ -19,11 +19,10 @@
           {{ t("websocket.message") }}
         </label>
         <tippy
-          ref="contentTypeOptions"
           interactive
           trigger="click"
           theme="popover"
-          arrow
+          :on-shown="() => tippyActions.focus()"
         >
           <span class="select-wrapper">
             <ButtonSecondary
@@ -33,9 +32,9 @@
           </span>
           <template #content="{ hide }">
             <div
-              class="flex flex-col"
+              ref="tippyActions"
+              class="flex flex-col focus:outline-none"
               tabindex="0"
-              role="menu"
               @keyup.escape="hide()"
             >
               <SmartItem
@@ -158,9 +157,10 @@ const emit = defineEmits<{
 const t = useI18n()
 const toast = useToast()
 
+// Template refs
+const tippyActions = ref<any | null>(null)
 const linewrapEnabled = ref(true)
 const wsCommunicationBody = ref<HTMLElement>()
-const contentTypeOptions = ref<Element>()
 const payload = ref<HTMLInputElement>()
 
 const prettifyIcon = refAutoReset<Component>(IconWand, 1000)

packages/hoppscotch-app/src/components/realtime/LogEntry.vue

@@ -96,7 +96,12 @@
           :key="`item-${index}`"
           class="flex items-center"
         >
-          <tippy interactive trigger="click" theme="popover" arrow>
+          <tippy
+            interactive
+            trigger="click"
+            theme="popover"
+            :on-shown="() => tippyActions.focus()"
+          >
             <div v-if="item.kind === 'RootObject'" class="outline-item">{}</div>
             <div v-if="item.kind === 'RootArray'" class="outline-item">[]</div>
             <div v-if="item.kind === 'ArrayMember'" class="outline-item">
@@ -113,9 +118,9 @@
               >
                 <div
                   v-if="item.kind === 'ArrayMember'"
-                  class="flex flex-col"
+                  ref="tippyActions"
+                  class="flex flex-col focus:outline-none"
                   tabindex="0"
-                  role="menu"
                   @keyup.escape="hide()"
                 >
                   <SmartItem
@@ -132,9 +137,9 @@
                 </div>
                 <div
                   v-if="item.kind === 'ObjectMember'"
-                  class="flex flex-col"
+                  ref="tippyActions"
+                  class="flex flex-col focus:outline-none"
                   tabindex="0"
-                  role="menu"
                   @keyup.escape="hide()"
                 >
                   <SmartItem
@@ -152,8 +157,8 @@
               </div>
               <div
                 v-if="item.kind === 'RootObject'"
-                class="flex flex-col"
+                ref="tippyActions"
-                role="menu"
+                class="flex flex-col focus:outline-none"
               >
                 <SmartItem
                   label="{}"
@@ -167,8 +172,8 @@
               </div>
               <div
                 v-if="item.kind === 'RootArray'"
-                class="flex flex-col"
+                ref="tippyActions"
-                role="menu"
+                class="flex flex-col focus:outline-none"
               >
                 <SmartItem
                   label="[]"
@@ -223,8 +228,12 @@ import { shortDateTime } from "~/helpers/utils/date"
 const t = useI18n()
 
 const props = defineProps<{ entry: LogEntryData }>()
+
+// Template refs
+const tippyActions = ref<any | null>(null)
 const editor = ref<any | null>(null)
 const linewrapEnabled = ref(true)
+
 const logPayload = computed(() => props.entry.payload)
 
 const selectedTab = ref<"json" | "raw">(

packages/hoppscotch-app/src/components/smart/ChangeLanguage.vue

@@ -1,6 +1,11 @@
 <template>
   <span class="inline-flex">
-    <tippy interactive trigger="click" theme="popover" arrow>
+    <tippy
+      interactive
+      trigger="click"
+      theme="popover"
+      :on-shown="() => tippyActions.focus()"
+    >
       <span class="select-wrapper">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
@@ -23,9 +28,9 @@
             />
           </div>
           <div
-            class="flex flex-col"
+            ref="tippyActions"
+            class="flex flex-col focus:outline-none"
             tabindex="0"
-            role="menu"
             @keyup.escape="hide()"
           >
             <SmartLink
@@ -96,6 +101,8 @@ const changeLocale = (locale: string) => {
   changeAppLanguage(locale)
 }
 
+// Template refs
+const tippyActions = ref<any | null>(null)
 const searchQuery = ref("")
 
 const filteredAppLanguages = computed(() => {

packages/hoppscotch-app/src/components/smart/FontSizePicker.vue

@@ -1,6 +1,11 @@
 <template>
   <span class="inline-flex">
-    <tippy interactive trigger="click" theme="popover" arrow>
+    <tippy
+      interactive
+      trigger="click"
+      theme="popover"
+      :on-shown="() => tippyActions.focus()"
+    >
       <span class="select-wrapper">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
@@ -15,9 +20,9 @@
       </span>
       <template #content="{ hide }">
         <div
-          class="flex flex-col"
+          ref="tippyActions"
+          class="flex flex-col focus:outline-none"
           tabindex="0"
-          role="menu"
           @keyup.escape="hide()"
         >
           <SmartItem
@@ -46,6 +51,7 @@ import IconType from "~icons/lucide/type"
 import { HoppFontSizes, HoppFontSize, applySetting } from "~/newstore/settings"
 import { useSetting } from "@composables/settings"
 import { useI18n } from "@composables/i18n"
+import { ref } from "vue"
 
 const t = useI18n()
 
@@ -59,4 +65,7 @@ const getFontSizeName = (size: HoppFontSize) => {
 const setActiveFont = (size: HoppFontSize) => {
   applySetting("FONT_SIZE", size)
 }
+
+// Template refs
+const tippyActions = ref<any | null>(null)
 </script>

packages/hoppscotch-app/src/components/teams/Edit.vue

@@ -87,11 +87,10 @@
               />
               <span>
                 <tippy
-                  ref="memberOptions"
                   interactive
                   trigger="click"
                   theme="popover"
-                  arrow
+                  :on-shown="() => tippyActions.focus()"
                 >
                   <span class="select-wrapper">
                     <input
@@ -104,9 +103,9 @@
                   </span>
                   <template #content="{ hide }">
                     <div
-                      class="flex flex-col"
+                      ref="tippyActions"
+                      class="flex flex-col focus:outline-none"
                       tabindex="0"
-                      role="menu"
                       @keyup.escape="hide()"
                     >
                       <SmartItem
@@ -233,7 +232,8 @@ const emit = defineEmits<{
   (e: "invite-team"): void
 }>()
 
-const memberOptions = ref<any | null>(null)
+// Template refs
+const tippyActions = ref<any | null>(null)
 
 const props = defineProps<{
   show: boolean

packages/hoppscotch-app/src/components/teams/Invite.vue

@@ -140,11 +140,10 @@
             />
             <span>
               <tippy
-                ref="newInviteeOptions"
                 interactive
                 trigger="click"
                 theme="popover"
-                arrow
+                :on-shown="() => tippyActions.focus()"
               >
                 <span class="select-wrapper">
                   <input
@@ -157,9 +156,9 @@
                 </span>
                 <template #content="{ hide }">
                   <div
-                    class="flex flex-col"
+                    ref="tippyActions"
+                    class="flex flex-col focus:outline-none"
                     tabindex="0"
-                    role="menu"
                     @keyup.escape="hide()"
                   >
                     <SmartItem
@@ -171,7 +170,7 @@
                       @click="
                         () => {
                           updateNewInviteeRole(index, 'OWNER')
-                          newInviteeOptions[index].tippy().hide()
+                          hide()
                         }
                       "
                     />
@@ -184,7 +183,7 @@
                       @click="
                         () => {
                           updateNewInviteeRole(index, 'EDITOR')
-                          newInviteeOptions[index].tippy().hide()
+                          hide()
                         }
                       "
                     />
@@ -197,7 +196,7 @@
                       @click="
                         () => {
                           updateNewInviteeRole(index, 'VIEWER')
-                          newInviteeOptions[index].tippy().hide()
+                          hide()
                         }
                       "
                     />
@@ -372,7 +371,8 @@ const toast = useToast()
 
 const colorMode = useColorMode()
 
-const newInviteeOptions = ref<any | null>(null)
+// Template refs
+const tippyActions = ref<any | null>(null)
 
 const props = defineProps({
   show: Boolean,

packages/hoppscotch-app/src/components/teams/Team.vue

@@ -81,7 +81,6 @@
           interactive
           trigger="click"
           theme="popover"
-          arrow
           :on-shown="() => tippyActions.focus()"
         >
           <ButtonSecondary
@@ -94,7 +93,6 @@
               ref="tippyActions"
               class="flex flex-col focus:outline-none"
               tabindex="0"
-              role="menu"
               @keyup.e="team.myRole === 'OWNER' ? edit.$el.click() : null"
               @keyup.x="
                 !(team.myRole === 'OWNER' && team.ownersCount == 1)

packages/hoppscotch-app/src/modules/v-focus.ts

@@ -9,11 +9,7 @@ import { HoppModule } from "."
 export default <HoppModule>{
   onVueAppInit(app) {
     app.directive("focus", {
-      mounted(el) {
+      mounted: (el) => nextTick(() => el.focus()),
-        nextTick(() => {
-          el.focus()
-        })
-      },
     })
   },
 }

packages/hoppscotch-app/src/pages/realtime/socketio.vue

@@ -7,7 +7,12 @@
         <div class="inline-flex flex-1 space-x-2">
           <div class="flex flex-1">
             <label for="client-version">
-              <tippy interactive trigger="click" theme="popover" arrow>
+              <tippy
+                interactive
+                trigger="click"
+                theme="popover"
+                :on-shown="() => tippyActions.focus()"
+              >
                 <span class="select-wrapper">
                   <input
                     id="client-version"
@@ -24,9 +29,9 @@
                 </span>
                 <template #content="{ hide }">
                   <div
-                    class="flex flex-col"
+                    ref="tippyActions"
+                    class="flex flex-col focus:outline-none"
                     tabindex="0"
-                    role="menu"
                     @keyup.escape="hide()"
                   >
                     <SmartItem
@@ -111,7 +116,12 @@
               <label class="font-semibold text-secondaryLight">
                 {{ t("authorization.type") }}
               </label>
-              <tippy interactive trigger="click" theme="popover" arrow>
+              <tippy
+                interactive
+                trigger="click"
+                theme="popover"
+                :on-shown="() => authTippyActions.focus()"
+              >
                 <span class="select-wrapper">
                   <ButtonSecondary
                     class="pr-8 ml-2 rounded-none"
@@ -120,9 +130,9 @@
                 </span>
                 <template #content="{ hide }">
                   <div
-                    class="flex flex-col"
+                    ref="authTippyActions"
+                    class="flex flex-col focus:outline-none"
                     tabindex="0"
-                    role="menu"
                     @keyup.escape="hide()"
                   >
                     <SmartItem
@@ -294,6 +304,9 @@ const connectionState = useReadonlyStream(
 )
 const log = useStream(SIOLog$, [], setSIOLog)
 
+// Template refs
+const tippyActions = ref<any | null>(null)
+const authTippyActions = ref<any | null>(null)
 const isUrlValid = ref(true)
 const authType = ref<"None" | "Bearer">("None")
 const bearerToken = ref("")