Focus search bar when typing on frontpage (#2696)

* Initial plan

* Add autofocus prop to search bar for frontpage

Co-authored-by: CommanderStorm <26258709+CommanderStorm@users.noreply.github.com>

* Add tests for search bar autofocus functionality

Co-authored-by: CommanderStorm <26258709+CommanderStorm@users.noreply.github.com>

* Only autofocus search when feedback form and search bar are closed

Co-authored-by: CommanderStorm <26258709+CommanderStorm@users.noreply.github.com>

* Focus search bar when typing on frontpage (not on page load)

Co-authored-by: CommanderStorm <26258709+CommanderStorm@users.noreply.github.com>

* Address code review: allow Shift key and optimize IGNORED_KEYS constant

Co-authored-by: CommanderStorm <26258709+CommanderStorm@users.noreply.github.com>

* Optimize performance: use Set for IGNORED_KEYS and cache search element

Co-authored-by: CommanderStorm <26258709+CommanderStorm@users.noreply.github.com>

* Fix SSR safety and add comprehensive tests for keyboard handling

Co-authored-by: CommanderStorm <26258709+CommanderStorm@users.noreply.github.com>

* Remove unnecessary searchElement cleanup in onUnmounted

Co-authored-by: CommanderStorm <26258709+CommanderStorm@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: CommanderStorm <26258709+CommanderStorm@users.noreply.github.com>
Co-authored-by: Frank Elsinga <frank@elsinga.de>

Author: Copilot

tests/specs/main.ui.spec.ts

@@ -24,6 +24,47 @@ test.describe("Homepage", () => {
     // await expect(page).toHaveScreenshot();
   });
 
+  test("should focus search bar when typing on homepage", async ({ page }) => {
+    await page.goto("/", { waitUntil: "networkidle" });
+
+    const searchInput = page.getByRole("textbox", { name: "Suchfeld" }).first();
+    
+    // Initially, search bar should not be focused
+    await expect(searchInput).not.toBeFocused();
+    
+    // Simulate typing a lowercase character
+    await page.keyboard.press("a");
+    
+    // Now search bar should be focused
+    await expect(searchInput).toBeFocused();
+  });
+
+  test("should focus search bar when typing uppercase letters", async ({ page }) => {
+    await page.goto("/", { waitUntil: "networkidle" });
+
+    const searchInput = page.getByRole("textbox", { name: "Suchfeld" }).first();
+    
+    await expect(searchInput).not.toBeFocused();
+    
+    // Type Shift+A (uppercase A)
+    await page.keyboard.press("A");
+    
+    await expect(searchInput).toBeFocused();
+  });
+
+  test("should not focus search bar when pressing Tab key", async ({ page }) => {
+    await page.goto("/", { waitUntil: "networkidle" });
+
+    const searchInput = page.getByRole("textbox", { name: "Suchfeld" }).first();
+    
+    await expect(searchInput).not.toBeFocused();
+    
+    // Press Tab - should not focus search bar
+    await page.keyboard.press("Tab");
+    
+    await expect(searchInput).not.toBeFocused();
+  });
+
   test("should display footer with links", async ({ page }) => {
     await page.goto("/", { waitUntil: "networkidle" });
 

tests/specs/search.ui.spec.ts

@@ -77,6 +77,21 @@ test.describe("Search Bar - Interactive Search", () => {
 
     await expect(page).toHaveURL("/en/search?q=MI");
   });
+
+  test("should not focus search bar when typing on search results page", async ({ page }) => {
+    await page.goto("/search?q=MI", { waitUntil: "networkidle" });
+
+    const searchInput = page.getByRole("textbox", { name: "Suchfeld" }).first();
+    
+    // Initially not focused
+    await expect(searchInput).not.toBeFocused();
+    
+    // Type a character - should NOT focus search bar on non-index page
+    await page.keyboard.press("a");
+    
+    // Should still not be focused
+    await expect(searchInput).not.toBeFocused();
+  });
 });
 
 test.describe("Search Page - Filtering and Pagination", () => {

webclient/app/layouts/default.vue

@@ -3,6 +3,43 @@ import { useFeedback } from "~/composables/feedback";
 
 const searchBarFocused = ref(false);
 const feedback = useFeedback();
+const route = useRoute();
+const searchElement = ref<HTMLElement | null>(null);
+
+const IGNORED_KEYS = new Set(['Escape', 'Tab', 'Enter', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageUp', 'PageDown', 'Delete', 'Backspace']);
+
+function handleKeyDown(event: KeyboardEvent) {
+  const isIndexPage = route.path === "/" || route.path === "/en";
+  
+  // Only handle on index page, when feedback is closed and search bar is not focused
+  if (!isIndexPage || feedback.value.open || searchBarFocused.value) {
+    return;
+  }
+  
+  // Ignore special keys (Ctrl, Alt, Meta - but allow Shift for uppercase/symbols)
+  if (event.ctrlKey || event.altKey || event.metaKey) {
+    return;
+  }
+  
+  // Ignore non-printable keys
+  if (IGNORED_KEYS.has(event.key)) {
+    return;
+  }
+  
+  // Focus the search bar when user starts typing
+  if (event.key.length === 1 && searchElement.value) {
+    searchElement.value.focus();
+  }
+}
+
+onMounted(() => {
+  searchElement.value = document.getElementById("search");
+  document.addEventListener("keydown", handleKeyDown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("keydown", handleKeyDown);
+});
 
 const i18nHead = useLocaleHead({ dir: true, seo: true });
 useHead({