Add controller for search focus for slash keypress

warehouse/static/js/warehouse/controllers/search_focus_controller.js

@@ -0,0 +1,29 @@
+/**
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  static targets = ["searchField"];
+
+  focusSearchField(event) {
+    // When we receive a keydown event, check if it's `/` and that we're not
+    // already focused on the search field, or any other input field.
+    if (event.code === "Slash" && event.target.tagName !== "INPUT") {
+      // Prevent the key from being handled as an actual input
+      event.preventDefault();
+      this.searchFieldTarget.focus();
+    }
+  }
+}

warehouse/templates/base.html

@@ -224,7 +224,7 @@
 
             <form class="search-form search-form--primary" action="{{ request.route_path('search') }}" role="search">
               <label for="search" class="sr-only">{% trans %}Search PyPI{% endtrans %}</label>
-              <input id="search" class="search-form__search" type="text" name="q" placeholder="{% trans %}Search projects{% endtrans %}" value="{{ term }}" autocomplete="off" autocapitalize="off" spellcheck="false">
+              <input id="search" class="search-form__search" type="text" name="q" placeholder="{% trans %}Search projects{% endtrans %}" value="{{ term }}" autocomplete="off" autocapitalize="off" spellcheck="false" data-controller="search-focus" data-action="keydown@window->search-focus#focusSearchField" data-target="search-focus.searchField">
               {% block search_form_extra_inputs %}{% endblock %}
               <button type="submit" class="search-form__button">
                 <i class="fa fa-search" aria-hidden="true"></i>

warehouse/templates/index.html

@@ -55,7 +55,7 @@ <h1 class="homepage-banner__title">{{ banner }}</h1>
       <label for="search" class="sr-only">{% trans %}Search PyPI{% endtrans %}</label>
 
       <!-- The following input is intentionally not autofocused, see https://github.com/pypa/warehouse/issues/6088 for more details -->
-      <input id="search" class="search-form__search large-input" type="text" name="q" placeholder="{% trans %}Search projects{% endtrans %}" autocomplete="off" autocapitalize="off" spellcheck="false">
+      <input id="search" class="search-form__search large-input" type="text" name="q" placeholder="{% trans %}Search projects{% endtrans %}" autocomplete="off" autocapitalize="off" spellcheck="false" data-controller="search-focus" data-action="keydown@window->search-focus#focusSearchField" data-target="search-focus.searchField">
 
       <button type="submit" class="search-form__button">
         <i class="fa fa-search" aria-hidden="true"></i>