From e15bd8bca1bbdf99c4e2bdd5554f11276a1f36e9 Mon Sep 17 00:00:00 2001
From: Nils Silbernagel <6422477+N-Silbernagel@users.noreply.github.com>
Date: Thu, 11 Mar 2021 15:11:06 +0100
Subject: [PATCH] fix tab group indicator position (#366)

* fix tab group indicator position for flex-end

* fix event type parsing

* update version

* 2.0.0-beta.31

* tab-group resize reposition active tab indicator

* tab-group remove transition constant

Co-authored-by: Nils Silbernagel <n.silbernagel@awesome-software.de>
Co-authored-by: Cory LaViska <cory@abeautifulsite.net>
---
 src/components/tab-group/tab-group.scss |  1 +
 src/components/tab-group/tab-group.ts   | 68 +++++++++++++++++--------
 2 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/src/components/tab-group/tab-group.scss b/src/components/tab-group/tab-group.scss
index f3a48f2eb..8fac080e4 100644
--- a/src/components/tab-group/tab-group.scss
+++ b/src/components/tab-group/tab-group.scss
@@ -23,6 +23,7 @@
   .tab-group__active-tab-indicator {
     position: absolute;
     transition: var(--sl-transition-fast) transform ease, var(--sl-transition-fast) width ease;
+    left: 0;
   }
 
   // Remove the focus ring when the user isn't interacting with a keyboard
diff --git a/src/components/tab-group/tab-group.ts b/src/components/tab-group/tab-group.ts
index 9f00bfcaf..f9e2b78a9 100644
--- a/src/components/tab-group/tab-group.ts
+++ b/src/components/tab-group/tab-group.ts
@@ -6,6 +6,7 @@ import { SlTab, SlTabPanel } from '../../shoelace';
 import { getOffset } from '../../internal/offset';
 import { scrollIntoView } from '../../internal/scroll';
 import { focusVisible } from '../../internal/focus-visible';
+import { styleMap } from 'lit-html/directives/style-map';
 
 /**
  * @since 2.0
@@ -67,7 +68,11 @@ export default class SlTabGroup extends LitElement {
 
     focusVisible.observe(this.tabGroup);
 
-    this.resizeObserver = new ResizeObserver(() => this.updateScrollControls());
+    this.resizeObserver = new ResizeObserver(() => {
+      this.stopActiveTabIndicatorTransitionUntilNextFrame();
+      this.respositionActiveTabIndicator();
+      this.updateScrollControls()
+    });
     this.resizeObserver.observe(this.nav);
     requestAnimationFrame(() => this.updateScrollControls());
 
@@ -253,30 +258,49 @@ export default class SlTabGroup extends LitElement {
         return;
       }
 
-      const width = tab.clientWidth;
-      const height = tab.clientHeight;
-      const offset = getOffset(tab, this.nav);
-      const offsetTop = offset.top + this.nav.scrollTop;
-      const offsetLeft = offset.left + this.nav.scrollLeft;
-
-      switch (this.placement) {
-        case 'top':
-        case 'bottom':
-          this.activeTabIndicator.style.width = `${width}px`;
-          (this.activeTabIndicator.style.height as string | undefined) = undefined;
-          this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;
-          break;
-
-        case 'left':
-        case 'right':
-          (this.activeTabIndicator.style.width as string | undefined) = undefined;
-          this.activeTabIndicator.style.height = `${height}px`;
-          this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;
-          break;
-      }
+      this.respositionActiveTabIndicator()
     }
   }
 
+  respositionActiveTabIndicator() {
+    const currentTab = this.getActiveTab();
+
+    if(!currentTab){
+      return;
+    }
+
+    const width = currentTab.clientWidth;
+    const height = currentTab.clientHeight;
+    const offset = getOffset(currentTab, this.nav);
+    const offsetTop = offset.top + this.nav.scrollTop;
+    const offsetLeft = offset.left + this.nav.scrollLeft;
+
+    switch (this.placement) {
+      case 'top':
+      case 'bottom':
+        this.activeTabIndicator.style.width = `${width}px`;
+        (this.activeTabIndicator.style.height as string | undefined) = undefined;
+        this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;
+        break;
+
+      case 'left':
+      case 'right':
+        (this.activeTabIndicator.style.width as string | undefined) = undefined;
+        this.activeTabIndicator.style.height = `${height}px`;
+        this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;
+        break;
+    }
+  }
+
+  stopActiveTabIndicatorTransitionUntilNextFrame() {
+    const transitionValue = this.activeTabIndicator.style.transition;
+    this.activeTabIndicator.style.transition = 'none';
+
+    requestAnimationFrame(() => {
+      this.activeTabIndicator.style.transition = transitionValue;
+    });
+  }
+
   syncTabsAndPanels() {
     this.tabs = this.getAllTabs();
     this.panels = this.getAllPanels();