diff --git a/components/Navbar.vue b/components/Navbar.vue
index 17d7d172af..fbcf348306 100644
--- a/components/Navbar.vue
+++ b/components/Navbar.vue
@@ -294,7 +294,7 @@ export default class NavbarMenu extends mixins(PrefixMixin, AuthMixin) {
   }
 
   showMobileSearchBar() {
-    this.mobilSearchRef.focusInput()
+    this.mobilSearchRef?.focusInput()
   }
 
   closeBurgerMenu() {
diff --git a/components/search/Search.vue b/components/search/Search.vue
index f0f6dbfb32..45e0065ecf 100644
--- a/components/search/Search.vue
+++ b/components/search/Search.vue
@@ -18,6 +18,7 @@
         <slot name="next-filter"></slot>
         <SearchBarInput
           v-if="!hideSearchInput"
+          ref="searchRef"
           v-model="name"
           :query="query"
           @enter="nativeSearch"
@@ -71,7 +72,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Emit, Prop, mixins } from 'nuxt-property-decorator'
+import { Component, Emit, Prop, Ref, mixins } from 'nuxt-property-decorator'
 import { Debounce } from 'vue-debounce-decorator'
 import { exist, existArray } from './exist'
 import { SearchQuery } from './types'
@@ -104,6 +105,7 @@ export default class Search extends mixins(
   @Prop({ type: Boolean, default: false }) public listed!: boolean
   @Prop(Boolean) public hideFilter!: boolean
   @Prop(Boolean) public hideSearchInput!: boolean
+  @Ref('searchRef') readonly searchRef
   public isVisible = false
   public query: SearchQuery = {
     search: this.$route.query?.search?.toString() ?? '',
@@ -261,6 +263,10 @@ export default class Search extends mixins(
     this.updateSearch(this.name)
   }
 
+  public focusInput(): void {
+    this.searchRef?.focusInput()
+  }
+
   @Debounce(100)
   replaceUrl(queryCondition: { [key: string]: any }): void {
     this.$router