Fix search field

layouts/partials/footer.html

@@ -23,30 +23,54 @@
       const searchElement = document.getElementById('search');
       const toggleButton = document.getElementById('toggle-search');
 
-      const ensureSearch = () => {
+      const waitForSearchInput = () => new Promise((resolve) => {
-        if (searchState.initialized || !searchElement) {
+        const findInput = () => {
+          const input = searchElement.querySelector('input');
+          if (input) {
+            resolve(input);
             return;
           }
 
+          window.requestAnimationFrame(findInput);
+        };
+
+        findInput();
+      });
+
+      const ensureSearch = async () => {
+        if (!searchElement) {
+          return null;
+        }
+
+        if (searchState.initialized) {
+          return searchElement.querySelector('input');
+        }
+
+        if (searchState.initializing) {
+          return waitForSearchInput();
+        }
+
         if (typeof window.PagefindUI !== 'function') {
           searchElement.innerHTML = '<p>Search is currently unavailable.</p>';
           searchState.initialized = true;
-          return;
+          return null;
         }
 
+        searchState.initializing = true;
         searchState.instance = new PagefindUI({ element: "#search", showSubResults: false });
         searchState.initialized = true;
+        searchState.initializing = false;
+        return waitForSearchInput();
       };
 
       if (toggleButton && searchElement) {
-        toggleButton.addEventListener('click', () => {
+        toggleButton.addEventListener('click', async () => {
           const isHidden = searchElement.hasAttribute('hidden');
 
           if (isHidden) {
-            ensureSearch();
             searchElement.removeAttribute('hidden');
             toggleButton.setAttribute('aria-expanded', 'true');
-            const input = searchElement.querySelector('input');
+            const input = await ensureSearch();
             if (input) {
               input.focus();
             }

layouts/partials/head.html

@@ -30,17 +30,18 @@
 		{{ else -}}
 		| <a href="{{ .Site.BaseURL }}">DE</a>
 		{{ end }}
-		| <button id="toggle-search" onclick="toggleSearch()" aria-label="Toggle Search">
+		| <button id="toggle-search" type="button" aria-label="Toggle Search" aria-expanded="false" aria-controls="search">
 			{{ template "feathericon" (dict "UseCDN" .Site.Params.useCDN "Icon" "search") }}
 		</button>
 	</nav>
 </header>
 
-<div id="search" style="display: none;"></div>
+<div id="search" hidden></div>
 
 <script>
-	function toggleSearch() {
+	window.codexSearch = {
-		const searchField = document.getElementById('search');
+		initialized: false,
-		searchField.style.display = searchField.style.display === 'none' ? 'block' : 'none';
+		initializing: false,
-	}
+		instance: null
+	};
 </script>