Fixed search not being shown when using header autohiding

CHANGELOG

@@ -45,7 +45,7 @@ mkdocs-material-6.2.0 (2020-12-22)
   * Added support for navigation sections
   * Added support for navigation expansion
   * Added support for integrating table of contents into navigation
-  * Added support for auto-hiding header on scroll
+  * Added support for autohiding header on scroll
   * Added support for hiding navigation and table of contents per page
   * Added support for arbitrary items in navigation tabs
   * Refactored navigation tabs to simplify grouping behavior

docs/changelog.md

@@ -35,7 +35,7 @@ template: overrides/main.html
 - Added support for navigation sections
 - Added support for navigation expansion
 - Added support for integrating table of contents into navigation
-- Added support for auto-hiding header on scroll
+- Added support for autohiding header on scroll
 - Added support for hiding navigation and table of contents per page
 - Added support for arbitrary items in navigation tabs
 - Refactored navigation tabs to simplify grouping behavior

material/assets/manifest.json

@@ -1,14 +1,14 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.83e5331e.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.83e5331e.min.js.map",
-  "assets/javascripts/vendor.js": "assets/javascripts/vendor.93c04032.min.js",
-  "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.93c04032.min.js.map",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.596b5164.min.js",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.596b5164.min.js.map",
+  "assets/javascripts/vendor.js": "assets/javascripts/vendor.5f54cce3.min.js",
+  "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.5f54cce3.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.8c7e0a7e.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.8c7e0a7e.min.js.map",
-  "assets/stylesheets/main.css": "assets/stylesheets/main.15aa0b43.min.css",
-  "assets/stylesheets/main.css.map": "assets/stylesheets/main.15aa0b43.min.css.map",
-  "assets/stylesheets/overrides.css": "assets/stylesheets/overrides.46d791ea.min.css",
-  "assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.46d791ea.min.css.map",
-  "assets/stylesheets/palette.css": "assets/stylesheets/palette.75751829.min.css",
-  "assets/stylesheets/palette.css.map": "assets/stylesheets/palette.75751829.min.css.map"
+  "assets/stylesheets/main.css": "assets/stylesheets/main.e67d4e15.min.css",
+  "assets/stylesheets/main.css.map": "assets/stylesheets/main.e67d4e15.min.css.map",
+  "assets/stylesheets/overrides.css": "assets/stylesheets/overrides.fc79678c.min.css",
+  "assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.fc79678c.min.css.map",
+  "assets/stylesheets/palette.css": "assets/stylesheets/palette.3e379585.min.css",
+  "assets/stylesheets/palette.css.map": "assets/stylesheets/palette.3e379585.min.css.map"
 }

material/assets/stylesheets/overrides.fc79678c.min.css

@@ -1,3 +1,3 @@
 @-webkit-keyframes tx-heart{0%,40%,80%,100%{transform:scale(1)}20%,60%{transform:scale(1.15)}}@keyframes tx-heart{0%,40%,80%,100%{transform:scale(1)}20%,60%{transform:scale(1.15)}}.md-typeset figure>p+figcaption{margin-top:-1.2rem}.md-typeset .twitter{color:#00acee}.md-typeset .tx-video{width:auto}.md-typeset .tx-video__inner{position:relative;width:100%;height:0;padding-bottom:56.138%}.md-typeset .tx-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;border:none}.md-typeset .tx-heart{-webkit-animation:tx-heart 1000ms infinite;animation:tx-heart 1000ms infinite}.md-typeset .tx-insiders{color:#e91e63}.md-typeset .tx-insiders-button{font-weight:400}.md-typeset .tx-insiders-count{font-weight:700}.md-typeset .tx-insiders-list{margin:2em 0;overflow:auto}.md-typeset .tx-insiders-list__item{display:block;float:left;width:3rem;height:3rem;margin:.2rem;overflow:hidden;border-radius:100%;transform:scale(1);transition:color 125ms,transform 125ms}.md-typeset .tx-insiders-list__item img{display:block;width:100%;height:auto;-webkit-filter:grayscale(100%);filter:grayscale(100%);transition:-webkit-filter 125ms;transition:filter 125ms;transition:filter 125ms, -webkit-filter 125ms}.md-typeset .tx-insiders-list__item:focus,.md-typeset .tx-insiders-list__item:hover{transform:scale(1.1)}.md-typeset .tx-insiders-list__item:focus img,.md-typeset .tx-insiders-list__item:hover img{-webkit-filter:grayscale(0%);filter:grayscale(0%)}.md-typeset .tx-insiders-list__item--private{color:var(--md-default-fg-color--lighter);font-weight:700;font-size:1.2rem;line-height:3rem;text-align:center;background:var(--md-default-fg-color--lightest)}.md-typeset .tx-switch button{cursor:pointer;transition:opacity 250ms}.md-typeset .tx-switch button:focus,.md-typeset .tx-switch button:hover{opacity:.75}.md-typeset .tx-switch button>code{display:block;color:var(--md-primary-bg-color);background-color:var(--md-primary-fg-color)}.md-typeset .tx-columns ol,.md-typeset .tx-columns ul{-moz-columns:2;columns:2}@media screen and (max-width: 29.9375em){.md-typeset .tx-columns ol,.md-typeset .tx-columns ul{-moz-columns:initial;columns:initial}}.md-typeset .tx-columns li{-moz-column-break-inside:avoid;break-inside:avoid}.md-announce a,.md-announce a:focus,.md-announce a:hover{color:currentColor}.md-announce strong{white-space:nowrap}.md-announce .twitter{margin-left:.2em}.tx-content__footer{margin-top:1rem;text-align:center}.tx-content__footer a{display:inline-block;color:#e91e63;transition:transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1),color 125ms}.tx-content__footer a:focus,.tx-content__footer a:hover{transform:scale(1.2)}.tx-content__footer hr{display:inline-block;width:2rem;margin:1em;vertical-align:middle;background-color:currentColor;border:none}.tx-container{padding-top:1rem;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(0, 0%, 100%, 1)' /></svg>") no-repeat bottom,linear-gradient(to bottom, var(--md-primary-fg-color), #a63fd9 99%, var(--md-default-bg-color) 99%)}[data-md-color-scheme=slate] .tx-container{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(232, 15%, 21%, 1)' /></svg>") no-repeat bottom,linear-gradient(to bottom, var(--md-primary-fg-color), #a63fd9 99%, var(--md-default-bg-color) 99%)}.tx-hero{margin:0 .8rem;color:var(--md-primary-bg-color)}.tx-hero h1{margin-bottom:1rem;color:currentColor;font-weight:700}@media screen and (max-width: 29.9375em){.tx-hero h1{font-size:1.4rem}}.tx-hero__content{padding-bottom:6rem}@media screen and (min-width: 60em){.tx-hero{display:flex;align-items:stretch}.tx-hero__content{max-width:19rem;margin-top:3.5rem;padding-bottom:14vw}.tx-hero__image{order:1;width:38rem;transform:translateX(4rem)}}@media screen and (min-width: 76.25em){.tx-hero__image{transform:translateX(8rem)}}.tx-hero .md-button{margin-top:.5rem;margin-right:.5rem;color:var(--md-primary-bg-color)}.tx-hero .md-button:focus,.tx-hero .md-button:hover{color:var(--md-default-bg-color);background-color:var(--md-accent-fg-color);border-color:var(--md-accent-fg-color)}.tx-hero .md-button--primary{color:#894da8;background-color:var(--md-primary-bg-color);border-color:var(--md-primary-bg-color)}
 
-/*# sourceMappingURL=overrides.46d791ea.min.css.map*/
+/*# sourceMappingURL=overrides.fc79678c.min.css.map*/

material/base.html

@@ -39,10 +39,10 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.15aa0b43.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.e67d4e15.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
-        <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.75751829.min.css' | url }}">
+        <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.3e379585.min.css' | url }}">
         {% if palette.primary %}
           {% import "partials/palette.html" as map %}
           {% set primary = map.primary(
@@ -184,8 +184,8 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/vendor.93c04032.min.js' | url }}"></script>
-      <script src="{{ 'assets/javascripts/bundle.83e5331e.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/vendor.5f54cce3.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.596b5164.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",

material/overrides/main.html

@@ -22,7 +22,7 @@
   <meta name="twitter:title" content="{{ title }}">
   <meta name="twitter:description" content="{{ config.site_description }}">
   <meta name="twitter:image" content="{{ image }}">
-  <link rel="stylesheet" href="{{ 'assets/stylesheets/overrides.46d791ea.min.css' | url }}">
+  <link rel="stylesheet" href="{{ 'assets/stylesheets/overrides.fc79678c.min.css' | url }}">
 {% endblock %}
 {% block announce %}
   <a href="https://twitter.com/squidfunk">

src/assets/javascripts/index.ts

@@ -48,7 +48,11 @@ import {
   catchError,
   map,
   bufferCount,
-  distinctUntilKeyChanged
+  distinctUntilKeyChanged,
+  mapTo,
+  startWith,
+  combineLatestWith,
+  distinctUntilChanged
 } from "rxjs/operators"
 
 import {
@@ -413,26 +417,58 @@ export function initialize(config: unknown) {
   // opportunities for refactoring, but we'll address them when this feature
   // got some feedback from the community.
   if (config.features.includes("header.autohide")) {
-    viewport$
+
+    // Threshold for header-hiding - always show if scrolled less than 400px.
+    // Also, search is not allowed to be active. Maybe make this dynamic.
+    const threshold$ = viewport$
+      .pipe(
+        map(({ offset }) => offset.y > 400),
+        combineLatestWith(watchToggle("search")),
+        map(([threshold, search]) => threshold && !search),
+        distinctUntilChanged()
+      )
+
+    // Scroll direction (true = down, false = up) + inflection point
+    const direction$ = viewport$
       .pipe(
         map(({ offset }) => offset.y),
         bufferCount(2, 1),
         map(([a, b]) => [a < b, b] as const),
-        distinctUntilKeyChanged(0),
-        switchMap(([direction, y0]) => viewport$
-          .pipe(
-            map(({ offset }) => offset.y),
-            filter(y1 => y1 > 400),
-            map(y1 => Math.abs(y0 - y1)),
-            filter(y => y > 100),
-            map(() => direction),
-            take(1)
-          )
-        )
+        distinctUntilKeyChanged(0)
       )
-        .subscribe(hide => {
-          const header = getElement("[data-md-component=header]")
-          header?.setAttribute("data-md-state", hide ? "hidden": "shadow")
+
+    // When the threshold is exceeded, and the search is not active, subscribe
+    // to the direction observable (always do a new subscription), and track
+    // scroll progress.
+    const hide$ = threshold$
+      .pipe(
+        switchMap(active => !active
+          ? of(false)
+          : direction$
+              .pipe(
+                combineLatestWith(viewport$),
+                filter(([[, y], { offset }]) => Math.abs(y - offset.y) > 100),
+                map(([[direction]]) => direction)
+              )
+        ),
+        distinctUntilChanged()
+      )
+
+    // Set header state depending on main state. There's still some possibility
+    // for improvement, as the page seems to jump when focusing the unfocused
+    // search. This would mean we would need to delay the focus/change event
+    // until the header is focussed, which we need to address in a refactoring.
+    hide$
+      .pipe(
+        combineLatestWith(main$),
+        map(([hide, main]) => main.active
+          ? hide ? "hidden" : "shadow"
+          : ""
+        ),
+        combineLatestWith(useComponent("header"))
+      )
+        .subscribe(([state, el]) => {
+          el.setAttribute("data-md-state", state)
         })
   }
 

src/assets/stylesheets/main/layout/_search.scss

@@ -104,7 +104,11 @@
       // Show overlay when search is active
       [data-md-toggle="search"]:checked ~ .md-header & {
         width: 100%;
-        height: 100%;
+        // Hack: when the header is translated upon scrolling, a new layer is
+        // induced, which means that the height will now refer to the height of
+        // the header, albeit positioning is fixed. This should be mitigated
+        // in all cases when setting the height to 2x the viewport.
+        height: 200vh;
         opacity: 1;
         transition:
           width     0ms,