Merge pull request #2814 from SamantazFox/fix-search-autofocus

Fix search autofocus

assets/js/handlers.js

@@ -142,4 +142,16 @@
         var csrf_token = target.parentNode.querySelector('input[name="csrf_token"]').value;
         xhr.send('csrf_token=' + csrf_token);
     }
+
+    // Handle keypresses
+    window.addEventListener('keydown', (event) => {
+        // Ignore modifier keys
+        if (event.ctrlKey || event.metaKey) { return; }
+
+        // Focus search bar on '/'
+        if (event.key == "/") {
+            document.getElementById('searchbox').focus();
+            event.preventDefault();
+        }
+    });
 })();

src/invidious/views/components/search_box.ecr

@@ -1,8 +1,8 @@
 <form class="pure-form" action="/search" method="get">
 	<fieldset>
 		<input type="search" id="searchbox" autocomplete="off" autocorrect="off"
-		autocapitalize="none" spellcheck="false" autofocus name="q"
+		autocapitalize="none" spellcheck="false" <% if autofocus %>autofocus<% end %>
-		placeholder="<%= translate(locale, "search") %>"
+		name="q" placeholder="<%= translate(locale, "search") %>"
 		title="<%= translate(locale, "search") %>"
 		value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>">
 	</fieldset>

src/invidious/views/search_homepage.ecr

@@ -14,7 +14,7 @@
     </div>
     <div class="pure-u-1-4"></div>
     <div class="pure-u-1 pure-u-md-12-24 searchbar">
-        <%= rendered "components/search_box" %>
+        <% autofocus = true %><%= rendered "components/search_box" %>
     </div>
     <div class="pure-u-1-4"></div>
 </div>

src/invidious/views/template.ecr

@@ -35,7 +35,7 @@
                         <a href="/" class="index-link pure-menu-heading">Invidious</a>
                     </div>
                     <div class="pure-u-1 pure-u-md-12-24 searchbar">
-                        <%= rendered "components/search_box" %>
+                        <% autofocus = false %><%= rendered "components/search_box" %>
                     </div>
                 <% end %>