fix: focus search bars only on mobile

matter-labs · Jun 1, 2023 · aaf161e · aaf161e
1 parent 65f195d
commit aaf161e
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 5 deletions.
diff --git a/components/common/SmallInput.vue b/components/common/SmallInput.vue
@@ -27,6 +27,7 @@ import { useFocus } from "@vueuse/core";
 
 import type { Component, PropType } from "vue";
 
+import { isMobile } from "@/utils/helpers";
 import { TransitionOpacity } from "@/utils/transitions";
 
 const props = defineProps({
@@ -47,7 +48,7 @@ const props = defineProps({
     default: "text",
   },
   autofocus: {
-    type: Boolean,
+    type: [Boolean, String] as PropType<boolean | "desktop">,
     default: false,
   },
 });
@@ -57,7 +58,9 @@ const emit = defineEmits<{
 }>();
 
 const inputElement = ref<HTMLInputElement | null>(null);
-const { focused } = useFocus(inputElement, { initialValue: !!props.autofocus });
+const { focused } = useFocus(inputElement, {
+  initialValue: props.autofocus === true || (props.autofocus === "desktop" && isMobile() === false),
+});
 
 const inputted = computed({
   get: () => props.modelValue,

diff --git a/components/token/TokenSelectDropdown.vue b/components/token/TokenSelectDropdown.vue
@@ -2,7 +2,7 @@
   <CommonModal v-model:opened="isModalOpened" class="token-select-modal" :title="title" @after-leave="search = ''">
     <Combobox v-model="selectedToken">
       <!-- TODO: Refactor this to use ComboboxInput as main component but look like CommonSmallInput -->
-      <CommonSmallInput v-model.trim="search" class="mb-4" placeholder="Symbol or address" autofocus>
+      <CommonSmallInput v-model.trim="search" class="mb-4" placeholder="Symbol or address" autofocus="desktop">
         <template #icon>
           <MagnifyingGlassIcon aria-hidden="true" />
         </template>

diff --git a/pages/contacts.vue b/pages/contacts.vue
@@ -23,7 +23,7 @@
       </CommonButton>
     </div>
     <div>
-      <CommonSmallInput v-model.trim="search" class="mb-4" placeholder="Address or name" autofocus>
+      <CommonSmallInput v-model.trim="search" class="mb-4" placeholder="Address or name" autofocus="desktop">
         <template #icon>
           <MagnifyingGlassIcon aria-hidden="true" />
         </template>

diff --git a/utils/helpers.ts b/utils/helpers.ts
@@ -40,3 +40,7 @@ export const getNetworkUrl = (network: ExtendedChain, routePath: string) => {
   }
   return network.hostnames[0] + routePath;
 };
+
+export const isMobile = () => {
+  return /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent);
+};
diff --git a/views/SelectAddress.vue b/views/SelectAddress.vue
@@ -2,7 +2,7 @@
   <div>
     <CommonBackButton @click="emit('back')" />
     <h1 class="h1">{{ title }}</h1>
-    <CommonSmallInput v-model.trim="search" class="mb-4" placeholder="Address or name" autofocus>
+    <CommonSmallInput v-model.trim="search" class="mb-4" placeholder="Address or name" autofocus="desktop">
       <template #icon>
         <MagnifyingGlassIcon aria-hidden="true" />
       </template>