Updated to have unique HTML ids for q field in header.

Author: sarahboyce

djangoproject/static/js/djangoproject.js

@@ -67,11 +67,9 @@ document.querySelector('.menu-button').addEventListener('click', function () {
 
 // Update search input placeholder text based on the user's operating system
 (function () {
-  const elements = document.querySelectorAll('[id="id_q"]');
-
-  if (!elements.length) {
-    return;
-  }
+  const mobile_search_input = document.getElementById('id_mobile-q');
+  const desktop_search_input = document.getElementById('id_desktop-q');
+  const elements = [mobile_search_input, desktop_search_input];
 
   const is_mac = navigator.userAgent.indexOf('Mac') !== -1;
 
@@ -96,13 +94,17 @@ window.addEventListener('keydown', function (e) {
 
   e.preventDefault();
 
-  function querySelectorVisible(selector) {
-    return [...document.querySelectorAll(selector)].find(
-      (el) => el.offsetParent !== null,
-    );
+  function isVisible(el) {
+    return el && el.offsetParent !== null;
   }
 
-  const el = querySelectorVisible('#id_q');
+  const inputs = [
+    document.getElementById('id_desktop-q'),
+    document.getElementById('id_mobile-q'),
+  ];
+
+  const el = inputs.find(isVisible);
+  if (!el) return;
 
   el.select();
   el.focus();

djangoproject/templates/includes/header.html

@@ -1,4 +1,5 @@
 {% load docs %}
+{% search_context as cached_search_context %}
 {% if 'preview.djangoproject.com' in request.get_host %}
   <div class="copy-banner" style="background: #fff78e; padding: 10px;"></div>
 {% endif %}
@@ -7,7 +8,7 @@
     <a class="logo" href="{% url 'homepage' %}">Django</a>
     <p class="meta">The web framework for perfectionists with deadlines.</p>
     <div class="header-mobile-only">
-      {% search_form %}
+      {% search_form prefix="mobile" cached_search_context=cached_search_context %}
       <div class="light-dark-mode-toggle">
         {% include "includes/toggle_theme.html" %}
       </div>
@@ -47,7 +48,7 @@
           <a href="{% url 'fundraising:index' %}">&#9829; Donate</a>
         </li>
         <li>
-          {% search_form %}
+          {% search_form prefix="desktop" cached_search_context=cached_search_context %}
         </li>
         <li>
           {% include "includes/toggle_theme.html" %}

djangoproject/templates/search_form.html

@@ -1,6 +1,7 @@
-{% load i18n %}
+{% load i18n docs %}
 <search class="search form-input" aria-labelledby="docs-search-label">
-  <form action="{% url 'document-search' version=version lang=lang host 'docs' %}">
+  <form action="{% url 'document-search' version=cached_search_context.version lang=cached_search_context.lang host 'docs' %}">
+    {% build_search_form cached_search_context.release prefix as form %}
     <label id="docs-search-label" class="visuallyhidden" for="{{ form.q.id_for_label }}">{{ form.q.field.widget.attrs.placeholder }}</label>
     {{ form.q }}
 

djangoproject/tests.py

@@ -237,45 +237,39 @@ def test_search_ctrl_k_hotkey_desktop(self):
         page = self.browser.new_page()
         page.goto(self.live_server_url)
 
-        mobile_search_bar, desktop_search_bar = page.query_selector_all("#id_q")
+        mobile_search_bar = page.locator("#id_mobile-q")
+        desktop_search_bar = page.locator("#id_desktop-q")
         self.assertFalse(mobile_search_bar.is_visible())
         self.assertTrue(desktop_search_bar.is_visible())
-        is_focused = page.evaluate(
-            "el => document.activeElement === el", desktop_search_bar
-        )
+        is_focused = page.evaluate("document.activeElement.id === 'id_desktop-q'")
         self.assertFalse(is_focused)
 
         page.keyboard.press("Control+KeyK")
-        is_focused = page.evaluate(
-            "el => document.activeElement === el", desktop_search_bar
-        )
+        is_focused = page.evaluate("document.activeElement.id === 'id_desktop-q'")
         self.assertTrue(is_focused)
         page.close()
 
     def test_search_ctrl_k_hotkey_mobile(self):
         page = self.browser.new_page(viewport={"width": 375, "height": 812})
         page.goto(self.live_server_url)
 
-        mobile_search_bar, desktop_search_bar = page.query_selector_all("#id_q")
+        mobile_search_bar = page.locator("#id_mobile-q")
+        desktop_search_bar = page.locator("#id_desktop-q")
         self.assertTrue(mobile_search_bar.is_visible())
         self.assertFalse(desktop_search_bar.is_visible())
-        is_focused = page.evaluate(
-            "el => document.activeElement === el", mobile_search_bar
-        )
+        is_focused = page.evaluate("document.activeElement.id === 'id_mobile-q'")
         self.assertFalse(is_focused)
 
         page.keyboard.press("Control+KeyK")
-        is_focused = page.evaluate(
-            "el => document.activeElement === el", mobile_search_bar
-        )
+        is_focused = page.evaluate("document.activeElement.id === 'id_mobile-q'")
         self.assertTrue(is_focused)
         page.close()
 
     def test_search_placeholder_mac_mode(self):
         page = self.browser.new_page(user_agent="Mozilla/5.0 (Macintosh) AppleWebKit")
         page.goto(self.live_server_url)
 
-        inputs = page.query_selector_all("#id_q")
+        inputs = page.query_selector_all('[name="q"]')
         self.assertEqual(len(inputs), 2)
 
         for el in inputs:

djangoproject/utils.py

@@ -2,24 +2,24 @@
 
 
 class CachedLibrary(template.Library):
-    def cached_context_inclusion_tag(self, template_name, *, name=None):
+    def cached_context_simple_tag(self, name=None):
         """
-        Wraps @register.inclusion_tag(template_name, takes_context=True) to
-        automatically cache the returned context dictionary inside the
-        template's render_context for the duration of a single render pass.
+        Wraps @register.simple_tag(takes_context=True) to cache the returned
+        value inside the template's render_context during a single template
+        render pass.
 
         This is useful when a tag may be rendered multiple times within the
-        same template and computing its context is expensive (e.g. due to
-        database queries).
+        same template and with an expensive computation (e.g. due to database
+        queries).
         """
 
         def decorator(func):
             tag_name = name or func.__name__
 
-            @self.inclusion_tag(template_name, takes_context=True, name=tag_name)
+            @self.simple_tag(takes_context=True, name=tag_name)
             def wrapper(context, *args, **kwargs):
                 render_context = getattr(context, "render_context", None)
-                cache_key = f"{tag_name}_cached_context"
+                cache_key = f"{tag_name}_cached_value"
 
                 if render_context is not None and cache_key in render_context:
                     return render_context[cache_key]

docs/forms.py

@@ -16,3 +16,8 @@ def __init__(self, data=None, **kwargs):
                 "placeholder": search_label_placeholder,
             }
         )
+        q_with_prefix = super().add_prefix("q")
+        self.fields["q"].widget.attrs["id"] = f"id_{q_with_prefix}"
+
+    def add_prefix(self, field_name):
+        return field_name

docs/templatetags/docs.py

@@ -20,19 +20,35 @@
 register = CachedLibrary()
 
 
-@register.cached_context_inclusion_tag("search_form.html")
-def search_form(context):
-    if "request" not in context:
+@register.inclusion_tag("search_form.html", takes_context=True)
+def search_form(context, *, prefix, cached_search_context=None):
+    return {
+        "prefix": prefix,
+        "request": context.get("request"),
+        "cached_search_context": cached_search_context,
+    }
+
+
+@register.simple_tag(takes_context=True)
+def build_search_form(context, release, prefix=None):
+    request = context.get("request")
+    return DocSearchForm(
+        request.GET if request else None, release=release, prefix=prefix
+    )
+
+
+@register.cached_context_simple_tag()
+def search_context(context):
+    if context.get("request") is None:
         # Django's built-in error views (like django.views.defaults.server_error)
         # render templates without attaching a RequestContext — meaning the 'request'
         # variable is not present in the template context.
         return {
-            "form": DocSearchForm(release=None),
             "version": "dev",
             "lang": settings.DEFAULT_LANGUAGE_CODE,
+            "release": None,
         }
 
-    request = context["request"]
     lang = context.get("lang", settings.DEFAULT_LANGUAGE_CODE)
 
     if "version" in context:
@@ -43,9 +59,9 @@ def search_form(context):
         release = DocumentRelease.objects.select_related("release").current()
 
     return {
-        "form": DocSearchForm(request.GET, release=release),
         "version": release.version,
         "lang": lang,
+        "release": release,
     }
 
 

docs/tests/test_templates.py

@@ -235,7 +235,11 @@ def test_search_form_renders_without_request_in_template(self):
         Ensures the tag doesn't crash when rendered inside a template that
         lacks a 'request' variable e.g. during Django's built-in error views.
         """
-        template = Template("{% load docs %}{% search_form %}")
+        template = Template(
+            "{% load docs %}"
+            "{% search_context as cached %}"
+            '{% search_form prefix="desktop" cached_search_context=cached %}'
+        )
         rendered = template.render(Context({}))
         self.assertIn(
             '<search class="search form-input" aria-labelledby="docs-search-label">',
@@ -253,7 +257,12 @@ def test_search_form_queries_multiple_renders(self):
         DocumentRelease.objects.create(
             lang=settings.DEFAULT_LANGUAGE_CODE, release=r2, is_default=True
         )
-        template = Template("{% load docs %}{% search_form %}{% search_form %}")
+        template = Template(
+            "{% load docs %}"
+            "{% search_context as cached %}"
+            '{% search_form prefix="mobile" cached_search_context=cached %}'
+            '{% search_form prefix="desktop" cached_search_context=cached %}'
+        )
         with self.assertNumQueries(1):
             rendered = template.render(Context({"request": Mock()}))
 

docs/views.py

@@ -144,24 +144,29 @@ def search_results(request, lang, version, per_page=10, orphans=3):
 
     activate(lang)
 
-    form = DocSearchForm(request.GET or None, release=release)
-
     # Get available languages for the language switcher
     available_languages = DocumentRelease.objects.get_available_languages_by_version(
         version
     )
 
     context = {
-        "form": form,
         "lang": release.lang,
         "version": release.version,
         "release": release,
         "available_languages": available_languages,
         "searchparams": request.GET.urlencode(),
     }
 
-    if form.is_valid():
-        q = form.cleaned_data.get("q")
+    mobile_form = DocSearchForm(request.GET or None, release=release, prefix="mobile")
+    desktop_form = DocSearchForm(request.GET or None, release=release, prefix="desktop")
+    submitted_form = None
+    if desktop_form.is_valid():
+        submitted_form = desktop_form
+    elif mobile_form.is_valid():
+        submitted_form = mobile_form
+
+    if submitted_form:
+        q = submitted_form.cleaned_data.get("q")
 
         if q:
             # catch queries that are coming from browser search bars