From 1ee61ea28ad8ecc23f4f4a61fb679814c92182fd Mon Sep 17 00:00:00 2001
From: Naomi Pentrel <5212232+npentrel@users.noreply.github.com>
Date: Sat, 16 Sep 2023 09:06:14 -0400
Subject: [PATCH] Fix jumpiness on tab change

---
 static/js/tabpane-persist.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/static/js/tabpane-persist.js b/static/js/tabpane-persist.js
index 4ebbac78bb..e87833a510 100644
--- a/static/js/tabpane-persist.js
+++ b/static/js/tabpane-persist.js
@@ -7,7 +7,6 @@ const _tdSupportsLocalStorage = () => typeof Storage !== 'undefined';
 // Helpers
 function tdPersistKey(key, value) {
   // @requires: tdSupportsLocalStorage();
-    console.log("key", key, "value", value);
   try {
     if (value) {
       localStorage.setItem(key, value);
@@ -36,10 +35,15 @@ function tdGetTabSelectEventCountAndInc() {
 
 // Main functions
 
-function tdActivateTabsWithKey(key) {
+function tdActivateTabsWithKey(key, clicked_element, rectangle) {
   if (!key) return;
 
-  document.querySelectorAll(`.nav-tabs > .nav-item > a[data-td-tp-persist='${key}']`).forEach((element) => {
+    document.querySelectorAll(`.nav-tabs > .nav-item > a[data-td-tp-persist='${key}']`).forEach((element) => {
+    if (element == clicked_element) {
+      // Ensures that if the dom changes above the element, the user's view
+      // doesn't jump
+      window.scrollBy(0, element.getBoundingClientRect().top - rectangle.top);
+    }
     new bootstrap.Tab(element).show();
   });
 }
@@ -51,7 +55,6 @@ function tdPersistActiveTab(activeTabKey) {
     _tdStoragePersistKey(activeTabKey),
     tdGetTabSelectEventCountAndInc()
   );
-  tdActivateTabsWithKey(activeTabKey);
 }
 
 // Handlers
@@ -86,10 +89,10 @@ function tdGetAndActivatePersistedTabs(tabs) {
 
 function tdRegisterTabClickHandler(tabs) {
   tabs.forEach((tab) => {
-    tab.addEventListener('click', () => {
+    tab.addEventListener('click', (event) => {
       const activeTabKey = tab.getAttribute("data-td-tp-persist");
       tdPersistActiveTab(activeTabKey);
-      tdActivateTabsWithKey(activeTabKey)
+      tdActivateTabsWithKey(activeTabKey, event.srcElement, event.srcElement.getBoundingClientRect())
     });
   });
 }