Fixed code blocks not selectable via keyboard after content tabs switch

material/assets/manifest.json

@@ -1,6 +1,6 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.21e94a31.min.js",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.9a5a6e7c.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.21e94a31.min.js.map",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.9a5a6e7c.min.js.map",
   "assets/javascripts/vendor.js": "assets/javascripts/vendor.00ecb175.min.js",
   "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.00ecb175.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.3f4c5856.min.js",

material/base.html

@@ -217,7 +217,7 @@
     {% endblock %}
     {% block scripts %}
       <script src="{{ 'assets/javascripts/vendor.00ecb175.min.js' | url }}"></script>
-      <script src="{{ 'assets/javascripts/bundle.21e94a31.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.9a5a6e7c.min.js' | url }}"></script>
       {% for path in config["extra_javascript"] %}
         <script src="{{ path | url }}"></script>
       {% endfor %}

src/assets/javascripts/components/content/code/index.ts

@@ -21,11 +21,20 @@
  */
 
 import ClipboardJS from "clipboard"
-import { Observable, Subject } from "rxjs"
+import {
+  NEVER,
+  Observable,
+  Subject,
+  fromEvent,
+  merge,
+  of
+} from "rxjs"
 import {
   distinctUntilKeyChanged,
   finalize,
   map,
+  share,
+  switchMap,
   tap,
   withLatestFrom
 } from "rxjs/operators"
@@ -35,6 +44,7 @@ import {
   Viewport,
   getElementContentSize,
   getElementSize,
+  getElements,
   watchMedia
 } from "~/browser"
 import { renderClipboardButton } from "~/templates"
@@ -86,6 +96,9 @@ let index = 0
 /**
  * Watch code block
  *
+ * This function will monitor size changes of the viewport, as well as switches
+ * of content tabs with embedded code blocks, as both may trigger overflow.
+ *
  * @param el - Code block element
  * @param options - Options
  *
@@ -94,9 +107,27 @@ let index = 0
 export function watchCodeBlock(
   el: HTMLElement, { viewport$ }: WatchOptions
 ): Observable<CodeBlock> {
-  return viewport$
+  const container$ = of(el)
+    .pipe(
+      switchMap(child => {
+        const container = child.closest("[data-tabs]")
+        if (container instanceof HTMLElement) {
+          return merge(
+            ...getElements("input", container)
+              .map(input => fromEvent(input, "change"))
+          )
+        }
+        return NEVER
+      }),
+      share()
+    )
+
+  /* Check overflow on resize and tab change */
+  return merge(
+    viewport$.pipe(distinctUntilKeyChanged("size")),
+    container$
+  )
     .pipe(
-      distinctUntilKeyChanged("size"),
       map(() => {
         const visible = getElementSize(el)
         const content = getElementContentSize(el)