Check if input is null when working with it

Author: obulat

frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue

@@ -1,7 +1,14 @@
 <script setup lang="ts">
 import { firstParam, focusIn, useNuxtApp, useRoute, useRouter } from "#imports"
 
-import { computed, nextTick, ref, SetupContext, watch } from "vue"
+import {
+  computed,
+  nextTick,
+  ref,
+  type SetupContext,
+  useTemplateRef,
+  watch,
+} from "vue"
 import { onClickOutside } from "@vueuse/core"
 
 import {
@@ -36,16 +43,18 @@ import VSearchBarButton from "~/components/VHeader/VHeaderMobile/VSearchBarButto
  * displayed in the bar itself.
  */
 
-const searchInputRef = ref<HTMLInputElement | null>(null)
-const headerRef = ref<HTMLElement | null>(null)
-const recentSearchesRef = ref<InstanceType<typeof VRecentSearches> | null>(null)
-const contentSettingsButtonRef = ref<InstanceType<
-  typeof VContentSettingsButton
-> | null>(null)
+const searchInputRef = useTemplateRef("searchInputRef")
+const headerRef = useTemplateRef("headerRef")
+const recentSearchesRef =
+  useTemplateRef<InstanceType<typeof VRecentSearches>>("recentSearchesRef")
+const contentSettingsButtonRef = useTemplateRef<
+  InstanceType<typeof VContentSettingsButton>
+>("contentSettingsButtonRef")
 const contentSettingsButton = computed(
   () => (contentSettingsButtonRef.value?.$el as HTMLElement) ?? undefined
 )
-const clearButtonRef = ref<InstanceType<typeof VSearchBarButton> | null>(null)
+const clearButtonRef =
+  useTemplateRef<InstanceType<typeof VSearchBarButton>>("clearButtonRef")
 
 const mediaStore = useMediaStore()
 const searchStore = useSearchStore()
@@ -69,7 +78,10 @@ const { updateSearchState, searchTerm, searchStatus } =
 const localSearchTerm = ref(searchTerm.value)
 
 const focusInput = () => {
-  const input = searchInputRef.value as HTMLInputElement
+  const input = searchInputRef.value
+  if (!input) {
+    return
+  }
   ensureFocus(input)
   input.selectionStart = selection.value.start
   input.selectionEnd = selection.value.end
@@ -110,7 +122,10 @@ const deactivate = () => {
  * the input field is blurred and focused again.
  */
 const updateSelection = () => {
-  const inputElement = searchInputRef.value as HTMLInputElement
+  const inputElement = searchInputRef.value
+  if (!inputElement) {
+    return
+  }
   const lastPos =
     inputElement.value.length > 0 ? inputElement.value.length - 1 : 0
   selection.value = {
@@ -127,7 +142,11 @@ const updateSelection = () => {
  * and activate the search bar.
  */
 const updateSearchText = () => {
-  localSearchTerm.value = (searchInputRef.value as HTMLInputElement).value
+  const inputElement = searchInputRef.value
+  if (!inputElement) {
+    return
+  }
+  localSearchTerm.value = inputElement.value
   updateSelection()
   if (isInputFocused.value && !isSearchBarActive.value) {
     activate()