refactor: improved popover actions, key bindings

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")