Fixed search reset button not hiding for empty input

material/assets/manifest.json

@@ -1,10 +1,10 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.a111dfc8.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.a111dfc8.min.js.map",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.af5dd3a5.min.js",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.af5dd3a5.min.js.map",
   "assets/javascripts/worker/packer.js": "assets/javascripts/worker/packer.c14659e8.min.js",
   "assets/javascripts/worker/packer.js.map": "assets/javascripts/worker/packer.c14659e8.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.3144ce89.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.3144ce89.min.js.map",
-  "assets/stylesheets/app-palette.scss": "assets/stylesheets/app-palette.8c25017f.min.css",
-  "assets/stylesheets/app.scss": "assets/stylesheets/app.4918cd9c.min.css"
+  "assets/stylesheets/app-palette.scss": "assets/stylesheets/app-palette.3f90c815.min.css",
+  "assets/stylesheets/app.scss": "assets/stylesheets/app.0ee2cfd0.min.css"
 }

material/base.html

@@ -43,9 +43,9 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/app.4918cd9c.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/app.0ee2cfd0.min.css' | url }}">
       {% if palette.primary or palette.accent %}
-        <link rel="stylesheet" href="{{ 'assets/stylesheets/app-palette.8c25017f.min.css' | url }}">
+        <link rel="stylesheet" href="{{ 'assets/stylesheets/app-palette.3f90c815.min.css' | url }}">
       {% endif %}
       {% if palette.primary %}
         {% import "partials/palette.html" as map %}
@@ -190,7 +190,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.a111dfc8.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.af5dd3a5.min.js' | url }}"></script>
       <script id="__lang" type="application/json">
         {%- set translations = {} -%}
         {%- for key in [

material/partials/search.html

@@ -6,7 +6,7 @@
   <label class="md-search__overlay" for="__search"></label>
   <div class="md-search__inner" role="search">
     <form class="md-search__form" name="search">
-      <input type="text" class="md-search__input" name="query" placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active">
+      <input type="text" class="md-search__input" name="query" placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active" required>
       <label class="md-icon md-search__icon" for="__search"></label>
       <button type="reset" class="md-icon md-search__icon" data-md-component="search-reset" tabindex="-1">
         &#xE5CD;

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

@@ -21,13 +21,7 @@
  */
 
 import { OperatorFunction, pipe } from "rxjs"
-import {
-  mapTo,
-  startWith,
-  switchMap,
-  switchMapTo,
-  tap
-} from "rxjs/operators"
+import { mapTo, switchMap, switchMapTo, tap } from "rxjs/operators"
 
 import { setElementFocus, watchSearchReset } from "observables"
 
@@ -43,12 +37,13 @@ import { useComponent } from "../../_"
  * @return Operator function
  */
 export function mountSearchReset(): OperatorFunction<HTMLElement, void> {
-  const query$ = useComponent<HTMLElement>("search-query")
   return pipe(
-    switchMap(watchSearchReset),
-    switchMapTo(query$),
+    switchMap(el => watchSearchReset(el)
+      .pipe(
+        switchMapTo(useComponent("search-query")),
         tap(setElementFocus),
-    mapTo(undefined),
-    startWith(undefined)
+        mapTo(undefined)
+      )
+    )
   )
 }

src/partials/search.html

@@ -38,6 +38,7 @@
         spellcheck="false"
         data-md-component="search-query"
         data-md-state="active"
+        required
       />
       <label class="md-icon md-search__icon" for="__search"></label>
       <button