From 1f29ff24d7aa4f32e55ed4da3441ad44038bc16a Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Sat, 1 Oct 2022 12:22:07 +0530
Subject: [PATCH] refactor: improved popover actions, key bindings

---
 .../src/components/app/Footer.vue             |  6 +----
 .../src/components/app/Header.vue             |  2 --
 .../src/components/collections/ChooseType.vue |  8 +++---
 .../components/collections/ImportExport.vue   |  8 +++---
 .../collections/graphql/Collection.vue        |  4 +--
 .../components/collections/graphql/Folder.vue |  3 +--
 .../collections/graphql/ImportExport.vue      |  8 +++---
 .../collections/graphql/Request.vue           |  3 +--
 .../components/collections/my/Collection.vue  |  5 ++--
 .../src/components/collections/my/Folder.vue  |  3 +--
 .../src/components/collections/my/Request.vue |  2 --
 .../collections/teams/Collection.vue          |  3 +--
 .../components/collections/teams/Folder.vue   |  5 ++--
 .../components/collections/teams/Request.vue  |  2 --
 .../components/environments/Environment.vue   |  3 +--
 .../components/environments/ImportExport.vue  | 13 ++++++---
 .../src/components/environments/index.vue     | 15 +++++++----
 .../src/components/graphql/Authorization.vue  | 20 +++++++-------
 .../src/components/graphql/Response.vue       | 17 +++++++++---
 .../src/components/http/Authorization.vue     | 20 +++++++-------
 .../src/components/http/Body.vue              | 16 ++++++++---
 .../src/components/http/CodegenModal.vue      | 13 +++++----
 .../src/components/http/Request.vue           | 14 +---------
 .../lenses/renderers/JSONLensRenderer.vue     | 18 ++++++-------
 .../src/components/realtime/Communication.vue | 10 +++----
 .../src/components/realtime/LogEntry.vue      | 27 ++++++++++++-------
 .../src/components/smart/ChangeLanguage.vue   | 13 ++++++---
 .../src/components/smart/FontSizePicker.vue   | 15 ++++++++---
 .../src/components/teams/Edit.vue             | 10 +++----
 .../src/components/teams/Invite.vue           | 16 +++++------
 .../src/components/teams/Team.vue             |  2 --
 .../hoppscotch-app/src/modules/v-focus.ts     |  6 +----
 .../src/pages/realtime/socketio.vue           | 25 ++++++++++++-----
 33 files changed, 184 insertions(+), 151 deletions(-)

diff --git a/packages/hoppscotch-app/src/components/app/Footer.vue b/packages/hoppscotch-app/src/components/app/Footer.vue
index 1bc0cd77e..7eb35e9b0 100644
--- a/packages/hoppscotch-app/src/components/app/Footer.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/src/components/app/Header.vue b/packages/hoppscotch-app/src/components/app/Header.vue
index 3be3b1328..069ae4eb6 100644
--- a/packages/hoppscotch-app/src/components/app/Header.vue
+++ b/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()"
diff --git a/packages/hoppscotch-app/src/components/collections/ChooseType.vue b/packages/hoppscotch-app/src/components/collections/ChooseType.vue
index 3b74e3f90..6de0823c1 100644
--- a/packages/hoppscotch-app/src/components/collections/ChooseType.vue
+++ b/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<{
diff --git a/packages/hoppscotch-app/src/components/collections/ImportExport.vue b/packages/hoppscotch-app/src/components/collections/ImportExport.vue
index 70551d448..7efbd2873 100644
--- a/packages/hoppscotch-app/src/components/collections/ImportExport.vue
+++ b/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"
                 />
diff --git a/packages/hoppscotch-app/src/components/collections/graphql/Collection.vue b/packages/hoppscotch-app/src/components/collections/graphql/Collection.vue
index 26c79c5dd..ba79adb06 100644
--- a/packages/hoppscotch-app/src/components/collections/graphql/Collection.vue
+++ b/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)
diff --git a/packages/hoppscotch-app/src/components/collections/graphql/Folder.vue b/packages/hoppscotch-app/src/components/collections/graphql/Folder.vue
index 708e85444..ba3de9731 100644
--- a/packages/hoppscotch-app/src/components/collections/graphql/Folder.vue
+++ b/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)
diff --git a/packages/hoppscotch-app/src/components/collections/graphql/ImportExport.vue b/packages/hoppscotch-app/src/components/collections/graphql/ImportExport.vue
index 04c406047..da5318062 100644
--- a/packages/hoppscotch-app/src/components/collections/graphql/ImportExport.vue
+++ b/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(() => {
diff --git a/packages/hoppscotch-app/src/components/collections/graphql/Request.vue b/packages/hoppscotch-app/src/components/collections/graphql/Request.vue
index cf38d61b1..00de353c1 100644
--- a/packages/hoppscotch-app/src/components/collections/graphql/Request.vue
+++ b/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)
diff --git a/packages/hoppscotch-app/src/components/collections/my/Collection.vue b/packages/hoppscotch-app/src/components/collections/my/Collection.vue
index b0afb345b..fec1b8fa2 100644
--- a/packages/hoppscotch-app/src/components/collections/my/Collection.vue
+++ b/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),
diff --git a/packages/hoppscotch-app/src/components/collections/my/Folder.vue b/packages/hoppscotch-app/src/components/collections/my/Folder.vue
index ce6deec6e..bb99aed85 100644
--- a/packages/hoppscotch-app/src/components/collections/my/Folder.vue
+++ b/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),
diff --git a/packages/hoppscotch-app/src/components/collections/my/Request.vue b/packages/hoppscotch-app/src/components/collections/my/Request.vue
index 47d9e8bed..eba24530c 100644
--- a/packages/hoppscotch-app/src/components/collections/my/Request.vue
+++ b/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()"
diff --git a/packages/hoppscotch-app/src/components/collections/teams/Collection.vue b/packages/hoppscotch-app/src/components/collections/teams/Collection.vue
index c80a67395..f06d7a5d7 100644
--- a/packages/hoppscotch-app/src/components/collections/teams/Collection.vue
+++ b/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),
diff --git a/packages/hoppscotch-app/src/components/collections/teams/Folder.vue b/packages/hoppscotch-app/src/components/collections/teams/Folder.vue
index bc6dd2ef1..7b2a1a94a 100644
--- a/packages/hoppscotch-app/src/components/collections/teams/Folder.vue
+++ b/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),
diff --git a/packages/hoppscotch-app/src/components/collections/teams/Request.vue b/packages/hoppscotch-app/src/components/collections/teams/Request.vue
index 5a7d37e2e..84308b711 100644
--- a/packages/hoppscotch-app/src/components/collections/teams/Request.vue
+++ b/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()"
diff --git a/packages/hoppscotch-app/src/components/environments/Environment.vue b/packages/hoppscotch-app/src/components/environments/Environment.vue
index 7e1531960..44da64c1b 100644
--- a/packages/hoppscotch-app/src/components/environments/Environment.vue
+++ b/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)
diff --git a/packages/hoppscotch-app/src/components/environments/ImportExport.vue b/packages/hoppscotch-app/src/components/environments/ImportExport.vue
index 5ca1715e9..48cb463a9 100644
--- a/packages/hoppscotch-app/src/components/environments/ImportExport.vue
+++ b/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(() => {
diff --git a/packages/hoppscotch-app/src/components/environments/index.vue b/packages/hoppscotch-app/src/components/environments/index.vue
index 6eb67f990..76da71957 100644
--- a/packages/hoppscotch-app/src/components/environments/index.vue
+++ b/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")
diff --git a/packages/hoppscotch-app/src/components/graphql/Authorization.vue b/packages/hoppscotch-app/src/components/graphql/Authorization.vue
index 50a6ab28c..2d958ee1c 100644
--- a/packages/hoppscotch-app/src/components/graphql/Authorization.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/src/components/graphql/Response.vue b/packages/hoppscotch-app/src/components/graphql/Response.vue
index 789b4d49d..b3464cad1 100644
--- a/packages/hoppscotch-app/src/components/graphql/Response.vue
+++ b/packages/hoppscotch-app/src/components/graphql/Response.vue
@@ -23,14 +23,18 @@
             @click.prevent="linewrapEnabled = !linewrapEnabled"
           />
           <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="t('action.download_file')"
+            v-tippy="{ theme: 'tooltip', allowHTML: true }"
+            :title="`${t(
+              'action.download_file'
+            )} <xmp>${getSpecialKey()}</xmp><xmp>J</xmp>`"
             :icon="downloadResponseIcon"
             @click="downloadResponse"
           />
           <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="t('action.copy')"
+            v-tippy="{ theme: 'tooltip', allowHTML: true }"
+            :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>
diff --git a/packages/hoppscotch-app/src/components/http/Authorization.vue b/packages/hoppscotch-app/src/components/http/Authorization.vue
index 1d17af7bc..693c3eba1 100644
--- a/packages/hoppscotch-app/src/components/http/Authorization.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/src/components/http/Body.vue b/packages/hoppscotch-app/src/components/http/Body.vue
index 674622c0f..531ef3c09 100644
--- a/packages/hoppscotch-app/src/components/http/Body.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/src/components/http/CodegenModal.vue b/packages/hoppscotch-app/src/components/http/CodegenModal.vue
index 01741fbbd..4f55f371f 100644
--- a/packages/hoppscotch-app/src/components/http/CodegenModal.vue
+++ b/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, {
diff --git a/packages/hoppscotch-app/src/components/http/Request.vue b/packages/hoppscotch-app/src/components/http/Request.vue
index 606859df5..72a82d8db 100644
--- a/packages/hoppscotch-app/src/components/http/Request.vue
+++ b/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)
diff --git a/packages/hoppscotch-app/src/components/lenses/renderers/JSONLensRenderer.vue b/packages/hoppscotch-app/src/components/lenses/renderers/JSONLensRenderer.vue
index eff3b1df7..de1c98dd7 100644
--- a/packages/hoppscotch-app/src/components/lenses/renderers/JSONLensRenderer.vue
+++ b/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)
 
diff --git a/packages/hoppscotch-app/src/components/realtime/Communication.vue b/packages/hoppscotch-app/src/components/realtime/Communication.vue
index 18d77bf60..3c7172ac4 100644
--- a/packages/hoppscotch-app/src/components/realtime/Communication.vue
+++ b/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)
diff --git a/packages/hoppscotch-app/src/components/realtime/LogEntry.vue b/packages/hoppscotch-app/src/components/realtime/LogEntry.vue
index 7ab2a3d8c..244bd6228 100644
--- a/packages/hoppscotch-app/src/components/realtime/LogEntry.vue
+++ b/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"
-                role="menu"
+                ref="tippyActions"
+                class="flex flex-col focus:outline-none"
               >
                 <SmartItem
                   label="{}"
@@ -167,8 +172,8 @@
               </div>
               <div
                 v-if="item.kind === 'RootArray'"
-                class="flex flex-col"
-                role="menu"
+                ref="tippyActions"
+                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">(
diff --git a/packages/hoppscotch-app/src/components/smart/ChangeLanguage.vue b/packages/hoppscotch-app/src/components/smart/ChangeLanguage.vue
index 309fe2f03..07a636aca 100644
--- a/packages/hoppscotch-app/src/components/smart/ChangeLanguage.vue
+++ b/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(() => {
diff --git a/packages/hoppscotch-app/src/components/smart/FontSizePicker.vue b/packages/hoppscotch-app/src/components/smart/FontSizePicker.vue
index 3af04b547..ef4eefdf4 100644
--- a/packages/hoppscotch-app/src/components/smart/FontSizePicker.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/src/components/teams/Edit.vue b/packages/hoppscotch-app/src/components/teams/Edit.vue
index 35788dd56..3eef397eb 100644
--- a/packages/hoppscotch-app/src/components/teams/Edit.vue
+++ b/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
diff --git a/packages/hoppscotch-app/src/components/teams/Invite.vue b/packages/hoppscotch-app/src/components/teams/Invite.vue
index da7d663c4..4c9bf132e 100644
--- a/packages/hoppscotch-app/src/components/teams/Invite.vue
+++ b/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,
diff --git a/packages/hoppscotch-app/src/components/teams/Team.vue b/packages/hoppscotch-app/src/components/teams/Team.vue
index 7c3e368b3..449d4313b 100644
--- a/packages/hoppscotch-app/src/components/teams/Team.vue
+++ b/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)
diff --git a/packages/hoppscotch-app/src/modules/v-focus.ts b/packages/hoppscotch-app/src/modules/v-focus.ts
index 37ac25163..190a61d67 100644
--- a/packages/hoppscotch-app/src/modules/v-focus.ts
+++ b/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) {
-        nextTick(() => {
-          el.focus()
-        })
-      },
+      mounted: (el) => nextTick(() => el.focus()),
     })
   },
 }
diff --git a/packages/hoppscotch-app/src/pages/realtime/socketio.vue b/packages/hoppscotch-app/src/pages/realtime/socketio.vue
index 8972bc41d..7bdeb336f 100644
--- a/packages/hoppscotch-app/src/pages/realtime/socketio.vue
+++ b/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("")