Fixed broken search in Safari <14

material/base.html

@@ -223,7 +223,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.d892486b.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.7353b375.min.js' | url }}"></script>
       {% for path in config["extra_javascript"] %}
         <script src="{{ path | url }}"></script>
       {% endfor %}

src/assets/javascripts/browser/media/index.ts

@@ -20,10 +20,15 @@
  * IN THE SOFTWARE.
  */
 
-import { NEVER, Observable, fromEvent, merge } from "rxjs"
+import {
+  NEVER,
+  Observable,
+  fromEvent,
+  fromEventPattern,
+  merge
+} from "rxjs"
 import {
   filter,
-  map,
   mapTo,
   startWith,
   switchMap
@@ -36,15 +41,21 @@ import {
 /**
  * Watch media query
  *
+ * Note that although `MediaQueryList.addListener` is deprecated we have to
+ * use it, because it's the only way to ensure proper downward compatibility.
+ *
+ * @see https://bit.ly/3dUBH2m - GitHub issue
+ *
  * @param query - Media query
  *
  * @returns Media observable
  */
 export function watchMedia(query: string): Observable<boolean> {
   const media = matchMedia(query)
-  return fromEvent<MediaQueryListEvent>(media, "change")
+  return fromEventPattern<boolean>(next => (
+    media.addListener(() => next(media.matches))
+  ))
     .pipe(
-      map(ev => ev.matches),
       startWith(media.matches)
     )
 }