refactor: autofocus can be disabled in smart input hopp ui component (#3273)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>

packages/hoppscotch-common/src/components.d.ts

@@ -89,12 +89,13 @@ declare module 'vue' {
     HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
     HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
     HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
-    HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete']
+    HoppSmartAutoComplete: typeof import("@hoppscotch/ui")["HoppSmartAutoComplete"]
     HoppSmartCheckbox: typeof import('@hoppscotch/ui')['HoppSmartCheckbox']
     HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
     HoppSmartExpand: typeof import('@hoppscotch/ui')['HoppSmartExpand']
     HoppSmartFileChip: typeof import('@hoppscotch/ui')['HoppSmartFileChip']
     HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput']
+    HoppSmartIntersection: typeof import('@hoppscotch/ui')['HoppSmartIntersection']
     HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
     HoppSmartLink: typeof import('@hoppscotch/ui')['HoppSmartLink']
     HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
@@ -152,6 +153,7 @@ declare module 'vue' {
     IconLucideMinus: typeof import('~icons/lucide/minus')['default']
     IconLucideSearch: typeof import('~icons/lucide/search')['default']
     IconLucideUsers: typeof import('~icons/lucide/users')['default']
+    IconLucideVerified: typeof import('~icons/lucide/verified')['default']
     InterceptorsExtensionSubtitle: typeof import('./components/interceptors/ExtensionSubtitle.vue')['default']
     LensesHeadersRenderer: typeof import('./components/lenses/HeadersRenderer.vue')['default']
     LensesHeadersRendererEntry: typeof import('./components/lenses/HeadersRendererEntry.vue')['default']

packages/hoppscotch-common/src/components/collections/index.vue

@@ -19,11 +19,12 @@
     >
       <WorkspaceCurrent :section="t('tab.collections')" />
 
-      <input
+      <HoppSmartInput
         v-model="filterTexts"
         :placeholder="t('action.search')"
-        class="py-2 pl-4 pr-2 bg-transparent !border-0"
+        input-styles="py-2 pl-4 pr-2 bg-transparent !border-0"
         type="search"
+        :autofocus="false"
         :disabled="collectionsType.type === 'team-collections'"
       />
     </div>

packages/hoppscotch-common/src/components/settings/Proxy.vue

@@ -21,17 +21,13 @@
   <div class="flex items-center py-4 space-x-2">
     <HoppSmartInput
       v-model="PROXY_URL"
+      :autofocus="false"
       styles="flex-1"
       placeholder=" "
+      :label="t('settings.proxy_url')"
       input-styles="input floating-input"
       :disabled="!proxyEnabled"
-    >
-      <template #label>
-        <label for="url">
-          {{ t("settings.proxy_url") }}
-        </label>
-      </template>
-    </HoppSmartInput>
+    />
     <HoppButtonSecondary
       v-tippy="{ theme: 'tooltip' }"
       :title="t('settings.reset_default')"

packages/hoppscotch-common/src/pages/profile.vue

@@ -23,7 +23,7 @@
         <div v-else class="space-y-8">
           <div
             class="h-24 rounded bg-primaryLight -mb-11 md:h-32"
-            style="background-image: url(&quot;/images/cover.svg&quot;)"
+            style="background-image: url(/images/cover.svg)"
           ></div>
           <div class="flex flex-col justify-between px-4 space-y-8 md:flex-row">
             <div class="flex items-end">
@@ -102,6 +102,7 @@
                     </label>
                     <HoppSmartInput
                       v-model="displayName"
+                      :autofocus="false"
                       styles="mt-2 md:max-w-sm"
                       :placeholder="`${t('settings.profile_name')}`"
                     >
@@ -124,6 +125,7 @@
                     </label>
                     <HoppSmartInput
                       v-model="emailAddress"
+                      :autofocus="false"
                       styles="flex mt-2 md:max-w-sm"
                       :placeholder="`${t('settings.profile_name')}`"
                     >

packages/hoppscotch-common/src/pages/realtime/websocket.vue

@@ -7,6 +7,7 @@
         <HoppSmartInput
           v-model="url"
           type="url"
+          :autofocus="false"
           styles="!inline-flex flex-1 space-x-2"
           input-styles="w-full px-4 py-2 border rounded !bg-primaryLight border-divider text-secondaryDark"
           :placeholder="`${t('websocket.url')}`"

packages/hoppscotch-ui/src/components/smart/Input.vue

@@ -6,7 +6,6 @@
       ref="inputRef"
       :class="inputStyles"
       v-model="inputText"
-      v-focus
       :placeholder="placeholder"
       :type="type"
       autocomplete="off"
@@ -32,11 +31,20 @@ let inputIDCounter = 564275
 
 <script setup lang="ts">
 import { onKeyStroke, useVModel } from "@vueuse/core"
-import { defineProps, ref } from "vue"
+import { defineProps, onMounted, ref, nextTick } from "vue"
 
 // Unique ID for input
 const inputID = `input-${inputIDCounter++}`
 
+const inputRef = ref()
+
+onMounted(async () => {
+  if (props.autofocus) {
+    await nextTick()
+    inputRef.value?.focus()
+  }
+})
+
 const props = withDefaults(
   defineProps<{
     id: string
@@ -47,6 +55,7 @@ const props = withDefaults(
     type: string
     label: string
     disabled: boolean
+    autofocus: boolean
   }>(),
   {
     id: "",
@@ -57,6 +66,7 @@ const props = withDefaults(
     type: "text",
     label: "",
     disabled: false,
+    autofocus: true,
   }
 )
 
@@ -65,13 +75,15 @@ const emit = defineEmits<{
   (e: "update:modelValue", v: string): void
 }>()
 
-const inputRef = ref()
-
 const inputText = useVModel(props, "modelValue", emit)
 
-onKeyStroke("Enter", (e) => {
-  if (!e.repeat) {
-    return emit("submit")
-  }
-}, { target: inputRef, eventName: "keydown" })
+onKeyStroke(
+  "Enter",
+  (e) => {
+    if (!e.repeat) {
+      return emit("submit")
+    }
+  },
+  { target: inputRef, eventName: "keydown" }
+)
 </script>