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

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

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>