(search) open external links in a new tab, fix keyboard navigation for external links

components/search/SearchForm.vue

@@ -49,7 +49,7 @@ onKeyStroke('k', (event) => {
 });
 
 const selected = ref<number | null>(null);
-const router = useRouter();
+const searchItems = useTemplateRef('searchItems');
 onKeyStroke('ArrowDown', () => {
     selected.value = Math.min(
         (selected.value ?? -1) + 1,
@@ -72,8 +72,8 @@ onKeyStroke('Enter', () => {
         return;
     }
 
-    router.push(document.url);
-    emit('selected');
+    const link = searchItems.value?.[selected.value]?.firstElementChild as HTMLElement | undefined;
+    link?.click();
 });
 
 const reset = () => {
@@ -112,6 +112,7 @@ defineExpose({ reset });
         <li
             v-for="(document, index) of searchAsyncData.data.value"
             :key="`${document.kind}-${document.id}`"
+            ref="searchItems"
             :class="['list-group-item list-group-item-action py-0 pe-0', selected === index ? 'list-group-item-active' : '']"
         >
             <SearchItem :document="document" @click="emit('selected')" />

components/search/SearchItem.vue

@@ -31,7 +31,7 @@ const searchKindHasImage = computed(() => {
 </script>
 
 <template>
-    <nuxt-link :to="document.url" class="search-item d-block p-3 text-dark text-decoration-none">
+    <PotentiallyExternalLink :to="document.url" class="search-item d-block p-3 text-dark text-decoration-none">
         <div class="h3 mb-3">
             <Icon :v="icon" />
             <Spelling :text="document.title" />
@@ -67,7 +67,7 @@ const searchKindHasImage = computed(() => {
             </div>
         </div>
         <Spelling v-else :text="document.content" />
-    </nuxt-link>
+    </PotentiallyExternalLink>
 </template>
 
 <style scoped lang="scss">