Tabs: scroll to active tab (#12948)

* Tabs: fix not scrolling to active tab

* update tabs.vue

Author: ziyoung

packages/tabs/src/tab-nav.vue

@@ -87,7 +87,7 @@
         const navScroll = this.$refs.navScroll;
         const activeTabBounding = activeTab.getBoundingClientRect();
         const navScrollBounding = navScroll.getBoundingClientRect();
-        const navBounding = nav.getBoundingClientRect();
+        const maxOffset = nav.offsetWidth - navScrollBounding.width;
         const currentOffset = this.navOffset;
         let newOffset = currentOffset;
 
@@ -97,10 +97,9 @@
         if (activeTabBounding.right > navScrollBounding.right) {
           newOffset = currentOffset + activeTabBounding.right - navScrollBounding.right;
         }
-        if (navBounding.right < navScrollBounding.right) {
-          newOffset = nav.offsetWidth - navScrollBounding.width;
-        }
-        this.navOffset = Math.max(newOffset, 0);
+
+        newOffset = Math.max(newOffset, 0);
+        this.navOffset = Math.min(newOffset, maxOffset);
       },
       update() {
         if (!this.$refs.nav) return;

packages/tabs/src/tabs.vue

@@ -45,8 +45,10 @@
       },
       currentName(value) {
         if (this.$refs.nav) {
-          this.$nextTick(_ => {
-            this.$refs.nav.scrollToActiveTab();
+          this.$nextTick(() => {
+            this.$refs.nav.$nextTick(_ => {
+              this.$refs.nav.scrollToActiveTab();
+            });
           });
         }
       }