From 695a9e29a29eba3b723418bcea5ef86db602c654 Mon Sep 17 00:00:00 2001
From: Vitaly <vitaly.raichev@epicmax.co>
Date: Tue, 23 May 2023 20:29:30 +0300
Subject: [PATCH] [#3343] ResizeObserver error in `VaTabs` (#3360)

* fix(#3343): update VaTabs component

* fix(#3343): fix demo
---
 .../ui/src/components/va-tabs/VaTabs.demo.vue |  4 +-
 packages/ui/src/components/va-tabs/VaTabs.vue | 71 ++++++++++---------
 2 files changed, 41 insertions(+), 34 deletions(-)

diff --git a/packages/ui/src/components/va-tabs/VaTabs.demo.vue b/packages/ui/src/components/va-tabs/VaTabs.demo.vue
index 90a240cdc0..5adb01c109 100644
--- a/packages/ui/src/components/va-tabs/VaTabs.demo.vue
+++ b/packages/ui/src/components/va-tabs/VaTabs.demo.vue
@@ -348,13 +348,13 @@
         <template #tabs>
           <va-tab
             name="Link 1"
-            to="/demo/vuestic-components/va-breadcrumbs/VaBreadcrumbs.demo.vue"
+            to="/demo/components/va-breadcrumbs/VaBreadcrumbs.demo.vue"
           >
             Link 1
           </va-tab>
           <va-tab
             name="Link 2"
-            to="/demo/vuestic-components/va-tabs/VaTabs.demo.vue"
+            to="/demo/components/va-tabs/VaTabs.demo.vue"
           >
             Active link
           </va-tab>
diff --git a/packages/ui/src/components/va-tabs/VaTabs.vue b/packages/ui/src/components/va-tabs/VaTabs.vue
index 3408049df1..c9d71bed38 100644
--- a/packages/ui/src/components/va-tabs/VaTabs.vue
+++ b/packages/ui/src/components/va-tabs/VaTabs.vue
@@ -76,6 +76,7 @@ import {
   shallowRef,
   StyleValue,
   WritableComputedRef,
+  onMounted,
 } from 'vue'
 
 import {
@@ -205,17 +206,38 @@ export default defineComponent({
 
     const moveToTab = (tab: TabComponent) => {
       const containerClientWidth = getClientWidth(container.value)
-      const tabsClientWidth = getClientWidth(tabs.value)
       const leftSidePosition = unref(tab.leftSidePosition)
       const rightSidePosition = unref(tab.rightSidePosition)
 
-      if (showPagination.value && leftSidePosition + containerClientWidth <= tabsClientWidth) {
+      // tabsContainer must be at the beginning of container
+      if (!showPagination.value) {
+        tabsContentOffset.value = 0
+        return
+      }
+
+      // tab is completely placed in the container - no need to move tabsContainer
+      if (
+        (leftSidePosition - tabsContentOffset.value >= 0) &&
+        (rightSidePosition - tabsContentOffset.value <= containerClientWidth)
+      ) {
+        return
+      }
+
+      // tab does not fit at the beginning of the container -
+      // move tabsContainer so that the beginning of the tab is at the beginning of the container
+      if (leftSidePosition - tabsContentOffset.value < 0) {
         tabsContentOffset.value = leftSidePosition
-      } else if (showPagination.value && rightSidePosition >= containerClientWidth) {
+        return
+      }
+
+      // tab does not fit at the end of the container -
+      // move tabsContainer so that the end of the tab is at the end of the container
+      if (rightSidePosition - tabsContentOffset.value > containerClientWidth) {
         tabsContentOffset.value = rightSidePosition - containerClientWidth
-      } else {
-        tabsContentOffset.value = 0
+        return
       }
+
+      tabsContentOffset.value = 0
     }
 
     const updateStartingXPoint = () => {
@@ -251,13 +273,6 @@ export default defineComponent({
         }
       })
 
-      const containerClientWidth = getClientWidth(container.value)
-      const tabsClientWidth = getClientWidth(tabs.value)
-
-      if (tabsContentOffset.value + containerClientWidth > tabsClientWidth && tabsList.value.length) {
-        moveToTab(tabsList.value[0])
-      }
-
       updateStartingXPoint()
     }
 
@@ -265,7 +280,10 @@ export default defineComponent({
       const tabsClientWidth = getClientWidth(tabs.value)
       const wrapperClientWidth = getClientWidth(wrapper.value)
 
-      showPagination.value = !!(tabs.value && wrapper.value && tabsClientWidth > wrapperClientWidth)
+      // we use requestAnimationFrame to prevent error "ResizeObserver loop limit exceeded"
+      requestAnimationFrame(() => {
+        showPagination.value = !!(tabs.value && wrapper.value && tabsClientWidth > wrapperClientWidth)
+      })
     }
 
     const movePaginationLeft = () => {
@@ -347,22 +365,6 @@ export default defineComponent({
       }
     }
 
-    const redrawTabs = () => {
-      const oldShowPaginationValue = showPagination.value
-
-      updatePagination()
-
-      if (oldShowPaginationValue === showPagination.value) {
-        updateTabsState()
-        includeAnimation()
-      } else {
-        requestAnimationFrame(() => {
-          updateTabsState()
-          includeAnimation()
-        })
-      }
-    }
-
     const selectTab = (tab: TabComponent) => {
       if (!tab) { return }
 
@@ -395,10 +397,16 @@ export default defineComponent({
       unregisterTab,
     })
 
-    // Lifecycle hooks
     watch(() => props.modelValue, updateTabsState)
 
-    useResizeObserver([wrapper, tabs], redrawTabs)
+    useResizeObserver([wrapper], updatePagination)
+    useResizeObserver([container], updateTabsState)
+
+    onMounted(() => {
+      requestAnimationFrame(() => {
+        includeAnimation()
+      })
+    })
 
     return {
       ...useTranslation(),
@@ -432,7 +440,6 @@ export default defineComponent({
       movePaginationRight,
       updateSlider,
       includeAnimation,
-      redrawTabs,
       selectTab,
     }
   },