Fixed rendering of tab indicator of nested content tabs

material/templates/base.html

@@ -249,7 +249,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.3220b9d7.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.dd8806f2.min.js' | url }}"></script>
       {% for script in config.extra_javascript %}
         {{ script | script_tag }}
       {% endfor %}

src/templates/assets/javascripts/components/content/tabs/index.ts

@@ -38,6 +38,7 @@ import {
   skip,
   startWith,
   subscribeOn,
+  switchMap,
   takeUntil,
   tap,
   withLatestFrom
@@ -53,7 +54,8 @@ import {
   getElementSize,
   getElements,
   watchElementContentOffset,
-  watchElementSize
+  watchElementSize,
+  watchElementVisibility
 } from "~/browser"
 import { renderTabbedControl } from "~/templates"
 import { h } from "~/utilities"
@@ -284,8 +286,9 @@ export function mountContentTabs(
       })
 
     /* Create and return component */
-    return watchContentTabs(inputs)
+    return watchElementVisibility(el)
       .pipe(
+        switchMap(() => watchContentTabs(inputs)),
         tap(state => push$.next(state)),
         finalize(() => push$.complete()),
         map(state => ({ ref: el, ...state }))