From ff519c6121cc995069caba9b232c216633d6f801 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Sun, 19 Jun 2022 17:53:37 +1000
Subject: [PATCH] fix(VTabs): use ResizeObserver if available

fixes #4733
fixes #10455
fixes #12783
fixes #14195
fixes #15316
---
 packages/vuetify/package.json                 |  1 +
 .../src/components/VSlideGroup/VSlideGroup.ts | 28 +++++++++++++------
 .../vuetify/src/components/VTabs/VTabs.ts     | 10 +++++++
 yarn.lock                                     |  5 ++++
 4 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/packages/vuetify/package.json b/packages/vuetify/package.json
index 88c69435681..f4679ec5416 100644
--- a/packages/vuetify/package.json
+++ b/packages/vuetify/package.json
@@ -70,6 +70,7 @@
     "@fortawesome/vue-fontawesome": "^0.1.10",
     "@types/jest": "^26.0.14",
     "@types/node": "^14.11.10",
+    "@types/resize-observer-browser": "^0.1.7",
     "@vue/test-utils": "1.0.0-beta.29",
     "autoprefixer": "^9.6.1",
     "babel-loader": "^8.0.6",
diff --git a/packages/vuetify/src/components/VSlideGroup/VSlideGroup.ts b/packages/vuetify/src/components/VSlideGroup/VSlideGroup.ts
index 618273f7099..0b14a3ddfe8 100644
--- a/packages/vuetify/src/components/VSlideGroup/VSlideGroup.ts
+++ b/packages/vuetify/src/components/VSlideGroup/VSlideGroup.ts
@@ -138,7 +138,6 @@ export const BaseSlideGroup = mixins<options &
   },
 
   data: () => ({
-    internalItemsLength: 0,
     isOverflowing: false,
     resizeTimeout: 0,
     startX: 0,
@@ -231,13 +230,26 @@ export const BaseSlideGroup = mixins<options &
     },
   },
 
-  beforeUpdate () {
-    this.internalItemsLength = (this.$children || []).length
-  },
-
-  updated () {
-    if (this.internalItemsLength === (this.$children || []).length) return
-    this.setWidths()
+  mounted () {
+    if (typeof ResizeObserver !== 'undefined') {
+      const obs = new ResizeObserver(() => {
+        this.onResize()
+      })
+      obs.observe(this.$el)
+      obs.observe(this.$refs.content)
+      this.$on('hook:destroyed', () => {
+        obs.disconnect()
+      })
+    } else {
+      let itemsLength = 0
+      this.$on('hook:beforeUpdate', () => {
+        itemsLength = (this.$refs.content?.children || []).length
+      })
+      this.$on('hook:updated', () => {
+        if (itemsLength === (this.$refs.content?.children || []).length) return
+        this.setWidths()
+      })
+    }
   },
 
   methods: {
diff --git a/packages/vuetify/src/components/VTabs/VTabs.ts b/packages/vuetify/src/components/VTabs/VTabs.ts
index 4d6757cafa9..6981d293df5 100644
--- a/packages/vuetify/src/components/VTabs/VTabs.ts
+++ b/packages/vuetify/src/components/VTabs/VTabs.ts
@@ -141,6 +141,16 @@ export default baseMixins.extend<options>().extend({
   },
 
   mounted () {
+    if (typeof ResizeObserver !== 'undefined') {
+      const obs = new ResizeObserver(() => {
+        this.onResize()
+      })
+      obs.observe(this.$el)
+      this.$on('hook:destroyed', () => {
+        obs.disconnect()
+      })
+    }
+
     this.$nextTick(() => {
       window.setTimeout(this.callSlider, 30)
     })
diff --git a/yarn.lock b/yarn.lock
index bc98650179f..4b7f69a30d1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2635,6 +2635,11 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.3.tgz#7ee330ba7caafb98090bece86a5ee44115904c2c"
   integrity sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA==
 
+"@types/resize-observer-browser@^0.1.7":
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/@types/resize-observer-browser/-/resize-observer-browser-0.1.7.tgz#294aaadf24ac6580b8fbd1fe3ab7b59fe85f9ef3"
+  integrity sha512-G9eN0Sn0ii9PWQ3Vl72jDPgeJwRWhv2Qk/nQkJuWmRmOB4HX3/BhD5SE1dZs/hzPZL/WKnvF0RHdTSG54QJFyg==
+
 "@types/resolve@0.0.8":
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"