Automatically focus and bring up keyboard on touch devices

material/base.html

@@ -250,7 +250,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.4e31edb1.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.9e673e97.min.js' | url }}"></script>
       {% for script in config.extra_javascript %}
         {% if script.path %}
           {{ script | script_tag }}

src/assets/javascripts/components/search/query/index.ts

@@ -39,6 +39,7 @@ import {
 } from "rxjs"
 
 import {
+  getElement,
   getLocation,
   setToggle,
   watchElementFocus,
@@ -186,6 +187,14 @@ export function mountSearchQuery(
     )
       .subscribe(() => el.focus())
 
+  // Focus search query on label click - note that this is necessary to bring
+  // up the keyboard on iOS and other mobile platforms, as the search dialog is
+  // not visible at first, and programatically focusing an input element must
+  // be triggered by a user interaction - see https://t.ly/Cb30n
+  const label = getElement("header [for=__search]")
+  fromEvent(label, "click")
+    .subscribe(() => el.focus())
+
   /* Create and return component */
   return watchSearchQuery(el, { worker$ })
     .pipe(