Used checkVisibility.

Author: sarahboyce

djangoproject/static/js/djangoproject.js

@@ -67,21 +67,19 @@ document.querySelector('.menu-button').addEventListener('click', function () {
 
 // Update search input placeholder text based on the user's operating system
 (function () {
-  const mobile_search_input = document.getElementById('id_mobile-q');
-  const desktop_search_input = document.getElementById('id_desktop-q');
+  const inputs = [
+    document.getElementById('id_desktop-q'),
+    document.getElementById('id_mobile-q'),
+  ];
 
-  if (!mobile_search_input || !desktop_search_input) {
-    return;
-  }
+  const el = inputs.find((el) => el.checkVisibility());
+  if (!el) return;
 
   const is_mac = navigator.userAgent.indexOf('Mac') !== -1;
 
-  const elements = [mobile_search_input, desktop_search_input];
-  elements.forEach((el) => {
-    const original_placeholder = el.getAttribute('placeholder');
-    const new_value = `${original_placeholder} (${is_mac ? '⌘\u200aK' : 'Ctrl+K'})`;
-    el.setAttribute('placeholder', new_value);
-  });
+  const original_placeholder = el.getAttribute('placeholder');
+  const new_value = `${original_placeholder} (${is_mac ? '⌘\u200aK' : 'Ctrl+K'})`;
+  el.setAttribute('placeholder', new_value);
 })();
 
 // Focus, select, and scroll to search input when key combination is pressed
@@ -98,16 +96,12 @@ window.addEventListener('keydown', function (e) {
 
   e.preventDefault();
 
-  function isVisible(el) {
-    return el && el.offsetParent !== null;
-  }
-
   const inputs = [
     document.getElementById('id_desktop-q'),
     document.getElementById('id_mobile-q'),
   ];
 
-  const el = inputs.find(isVisible);
+  const el = inputs.find((el) => el.checkVisibility());
   if (!el) return;
 
   el.select();

djangoproject/tests.py

@@ -9,7 +9,7 @@
 from django.urls import NoReverseMatch, get_resolver
 from django.utils.translation import activate, gettext as _
 from django_hosts.resolvers import reverse
-from playwright.sync_api import sync_playwright
+from playwright.sync_api import expect, sync_playwright
 
 from docs.models import DocumentRelease, Release
 
@@ -241,6 +241,7 @@ def test_search_ctrl_k_hotkey_desktop(self):
         desktop_search_bar = page.locator("#id_desktop-q")
         self.assertFalse(mobile_search_bar.is_visible())
         self.assertTrue(desktop_search_bar.is_visible())
+        expect(desktop_search_bar).to_have_attribute("placeholder", "Search (Ctrl+K)")
         is_focused = page.evaluate("document.activeElement.id === 'id_desktop-q'")
         self.assertFalse(is_focused)
 
@@ -256,6 +257,7 @@ def test_search_ctrl_k_hotkey_mobile(self):
         mobile_search_bar = page.locator("#id_mobile-q")
         desktop_search_bar = page.locator("#id_desktop-q")
         self.assertTrue(mobile_search_bar.is_visible())
+        expect(mobile_search_bar).to_have_attribute("placeholder", "Search (Ctrl+K)")
         self.assertFalse(desktop_search_bar.is_visible())
         is_focused = page.evaluate("document.activeElement.id === 'id_mobile-q'")
         self.assertFalse(is_focused)
@@ -269,11 +271,7 @@ 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('[name="q"]')
-        self.assertEqual(len(inputs), 2)
-
-        for el in inputs:
-            placeholder = el.get_attribute("placeholder")
-            self.assertIn("⌘\u200aK", placeholder)
+        desktop_search_bar = page.locator("#id_desktop-q")
+        expect(desktop_search_bar).to_have_attribute("placeholder", "Search (⌘\u200aK)")
 
         page.close()