diff --git a/src/components/search-input.vue b/src/components/search-input.vue
index 46ffbfa..bb48716 100644
--- a/src/components/search-input.vue
+++ b/src/components/search-input.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts">
-import {ref, watch} from "vue";
+import {ref, watch, watchEffect, type WatchStopHandle} from "vue";
 </script>
 
 <script setup lang="ts">
@@ -68,7 +68,16 @@ const $search = ref(undefined! as HTMLInputElement);
 
 defineExpose({
   focus() {
-    $search.value.focus();
+    // The watchEffect() is needed to avoid a race between the parent component
+    // being mounted and asking us to focus ourselves, and the actual mounting
+    // of this component.
+    let cancel: WatchStopHandle | undefined = undefined;
+    cancel = watchEffect(() => {
+      if ($search.value) {
+        $search.value.focus();
+        setTimeout(() => cancel!());
+      }
+    });
   },
 });