Focus on input when search form is shown

Signed-off-by: Travis Beckham <[email protected]>
linkerd · Sep 12, 2024 · 7c9b285 · 7c9b285
1 parent a6dfa7a
commit 7c9b285
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/linkerd.io/layouts/partials/main-menu.html b/linkerd.io/layouts/partials/main-menu.html
@@ -34,7 +34,7 @@
       <form id="searchForm" action="/search" method="get" style="display:none;">
         <div class="field">
           <p class="control has-icons-left">
-            <input class="input is-info is-rounded" type="text" name="q" placeholder="Search docs">
+            <input id="searchInput" class="input is-info is-rounded" type="text" name="q" placeholder="Search docs">
             <span class="icon is-small is-left">
               <i class="fas fa-search"></i>
             </span>

diff --git a/linkerd.io/themes/buoyant/assets/js/navbar.js b/linkerd.io/themes/buoyant/assets/js/navbar.js
@@ -52,6 +52,7 @@ document.addEventListener("DOMContentLoaded", function() {
   // Search
 
   const searchForm = document.getElementById("searchForm");
+  const searchInput = document.getElementById("searchInput");
   const searchToggle = document.getElementById("searchToggle");
   const githubStars = document.getElementById("githubStars");
 
@@ -60,6 +61,7 @@ document.addEventListener("DOMContentLoaded", function() {
       searchForm.style.display = "block";
       githubStars.style.display = "none";
       searchToggle.innerHTML = '<i class="fas fa-times"></i>';
+      searchInput.focus();
     } else {
       searchForm.style.display = "none";
       githubStars.style.display = "flex";