diff --git a/resources/assets/js/__tests__/components/ui/search-form.spec.ts b/resources/assets/js/__tests__/components/ui/search-form.spec.ts
index 841fe3ee..5f5a71da 100644
--- a/resources/assets/js/__tests__/components/ui/search-form.spec.ts
+++ b/resources/assets/js/__tests__/components/ui/search-form.spec.ts
@@ -1,9 +1,9 @@
-import Component from '@/components/ui/search-form.vue'
+import Component from '@/components/ui/SearchForm.vue'
 import { mock } from '@/__tests__/__helpers__'
 import { shallow } from '@/__tests__/adapter'
 import { eventBus } from '@/utils'
 
-describe('components/ui/search-form', () => {
+describe('components/ui/SearchForm', () => {
   afterEach(() => {
     jest.resetModules()
     jest.clearAllMocks()
diff --git a/resources/assets/js/components/layout/AppHeader.vue b/resources/assets/js/components/layout/AppHeader.vue
index f4583969..f05655ec 100644
--- a/resources/assets/js/components/layout/AppHeader.vue
+++ b/resources/assets/js/components/layout/AppHeader.vue
@@ -34,7 +34,7 @@ import { eventBus } from '@/utils'
 import { app as appConfig } from '@/config'
 import { commonStore, userStore } from '@/stores'
 
-const SearchForm = defineAsyncComponent(() => import('@/components/ui/search-form.vue'))
+const SearchForm = defineAsyncComponent(() => import('@/components/ui/SearchForm.vue'))
 const UserBadge = defineAsyncComponent(() => import('@/components/user/UserBadge.vue'))
 
 const user = toRef(userStore.state, 'current')
diff --git a/resources/assets/js/components/ui/search-form.vue b/resources/assets/js/components/ui/SearchForm.vue
similarity index 93%
rename from resources/assets/js/components/ui/search-form.vue
rename to resources/assets/js/components/ui/SearchForm.vue
index f3d4515f..ab2ff429 100644
--- a/resources/assets/js/components/ui/search-form.vue
+++ b/resources/assets/js/components/ui/SearchForm.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="side search" id="searchForm" :class="{ showing }" role="search">
     <input
-      type="search"
-      :class="{ dirty: q }"
-      @input="onInput"
-      @focus="goToSearchScreen"
-      autocorrect="false"
-      placeholder="Press F to search"
       ref="input"
-      spellcheck="false"
-      name="q"
       v-model="q"
+      :class="{ dirty: q }"
+      autocorrect="false"
+      name="q"
+      placeholder="Press F to search"
+      spellcheck="false"
+      type="search"
+      @focus="goToSearchScreen"
+      @input="onInput"
     >
   </div>
 </template>
@@ -23,7 +23,7 @@ import { debounce } from 'lodash'
 import { eventBus } from '@/utils'
 import router from '@/router'
 
-const input = ref(null as unknown as HTMLInputElement)
+const input = ref<HTMLInputElement>()
 const q = ref('')
 const showing = ref(!isMobile.phone)
 
@@ -38,8 +38,8 @@ eventBus.on({
   'TOGGLE_SEARCH_FORM': () => (showing.value = !showing.value),
 
   FOCUS_SEARCH_FIELD () {
-    input.value.focus()
-    input.value.select()
+    input.value?.focus()
+    input.value?.select()
   }
 })
 </script>