Autofill Cmd+K on 404 pages (cloudflare#24754)

Author: GregBrimble

src/components/404.astro

@@ -10,17 +10,37 @@
 
 <script>
 	import { track } from "~/util/zaraz";
+	import { openGlobalSearch } from "~/util/search";
 
 	const { pathname } = window.location;
 
 	const anchor = document.getElementById("404-search-link");
+	const pretty = decodeURIComponent(
+		pathname.replaceAll("/", " ").replaceAll("-", " ").trim(),
+	);
 
 	if (anchor) {
-		const pretty = pathname.replaceAll("/", " ").replaceAll("-", " ").trim();
-
 		anchor.setAttribute("href", `/search/?q=${encodeURIComponent(pretty)}`);
 		anchor.addEventListener("click", () => {
 			track("serp from location", { value: "404", query: pretty });
 		});
 	}
+
+	document.addEventListener(
+		"keydown",
+		(keyboardEvent) => {
+			if (
+				(keyboardEvent.metaKey || keyboardEvent.ctrlKey) &&
+				keyboardEvent.key === "k"
+			) {
+				keyboardEvent.preventDefault();
+				keyboardEvent.stopPropagation();
+
+				openGlobalSearch(pretty);
+			}
+		},
+		{
+			capture: true,
+		},
+	);
 </script>

src/components/overrides/Sidebar.astro

@@ -38,7 +38,9 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 <Default><slot /></Default>
 
 <script>
-	import { track } from "~/util/zaraz"
+	import { track } from "~/util/zaraz";
+	import { openGlobalSearch } from "~/util/search";
+
 	function initSidebarSearch() {
 		const searchInput = document.getElementById('sidebar-search') as HTMLInputElement;
 		const noResultsMessage = document.getElementById('sidebar-no-results') as HTMLElement;
@@ -231,29 +233,7 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 		globalSearchLink.addEventListener('click', () => {
 			const currentQuery = searchInput.value.trim();
 			if (currentQuery) {
-				// Try multiple selectors for DocSearch
-				const docSearchButton = document.querySelector('#docsearch button') as HTMLButtonElement ||
-					document.querySelector('.DocSearch-Button') as HTMLButtonElement ||
-					document.querySelector('[data-docsearch-button]') as HTMLButtonElement;
-
-				if (docSearchButton) {
-					// Click the DocSearch button to open the modal
-					docSearchButton.click();
-
-					// Wait for modal to open and set the search term
-					setTimeout(() => {
-						const searchInput = document.querySelector('.DocSearch-Input') as HTMLInputElement ||
-							document.querySelector('#docsearch-input') as HTMLInputElement ||
-							document.querySelector('[data-docsearch-input]') as HTMLInputElement;
-
-						if (searchInput) {
-							searchInput.value = currentQuery;
-							searchInput.focus();
-							// Trigger search
-							searchInput.dispatchEvent(new Event('input', { bubbles: true }));
-						}
-					}, 100);
-				}
+				openGlobalSearch(currentQuery);
 			}
 		});
 

src/util/search.ts

@@ -0,0 +1,31 @@
+export const openGlobalSearch = (searchTerm?: string) => {
+	// Try multiple selectors for DocSearch
+	const docSearchButton =
+		(document.querySelector("#docsearch button") as HTMLButtonElement) ||
+		(document.querySelector(".DocSearch-Button") as HTMLButtonElement) ||
+		(document.querySelector("[data-docsearch-button]") as HTMLButtonElement);
+
+	if (docSearchButton) {
+		// Click the DocSearch button to open the modal
+		docSearchButton.click();
+
+		if (searchTerm) {
+			// Wait for modal to open and set the search term
+			setTimeout(() => {
+				const searchInput =
+					(document.querySelector(".DocSearch-Input") as HTMLInputElement) ||
+					(document.querySelector("#docsearch-input") as HTMLInputElement) ||
+					(document.querySelector(
+						"[data-docsearch-input]",
+					) as HTMLInputElement);
+
+				if (searchInput) {
+					searchInput.value = searchTerm;
+					searchInput.focus();
+					// Trigger search
+					searchInput.dispatchEvent(new Event("input", { bubbles: true }));
+				}
+			}, 100);
+		}
+	}
+};