feat(v2): auto focus to tab if it is outside viewport (#4209)

* Simplify solution

* fix typo

Co-authored-by: slorber <lorber.sebastien@gmail.com>

packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx

@@ -14,6 +14,13 @@ import clsx from 'clsx';
 
 import styles from './styles.module.css';
 
+function isInViewport(element: HTMLElement) {
+  const {top, left, bottom, right} = element.getBoundingClientRect();
+  const {innerHeight, innerWidth} = window;
+
+  return top >= 0 && right <= innerWidth && bottom <= innerHeight && left >= 0;
+}
+
 const keys = {
   left: 37,
   right: 39,
@@ -48,6 +55,23 @@ function Tabs(props: Props): JSX.Element {
 
     if (groupId != null) {
       setTabGroupChoices(groupId, selectedTabValue);
+
+      setTimeout(() => {
+        if (isInViewport(selectedTab)) {
+          return;
+        }
+
+        selectedTab.scrollIntoView({
+          block: 'center',
+          behavior: 'smooth',
+        });
+
+        selectedTab.classList.add(styles.tabItemActive);
+        setTimeout(
+          () => selectedTab.classList.remove(styles.tabItemActive),
+          2000,
+        );
+      }, 150);
     }
   };
 

packages/docusaurus-theme-classic/src/theme/Tabs/styles.module.css

@@ -9,3 +9,15 @@
   margin-top: 0 !important;
 }
 
+.tabItemActive {
+  animation: blink 0.5s ease-in-out 5;
+}
+
+@keyframes blink {
+  0% {
+    background-color: var(--ifm-hover-overlay);
+  }
+  100% {
+    background-color: rgba(0, 0, 0, 0);
+  }
+}