From 4eb0e679e4fb50dba7e8ff85ad76af4894e949a9 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Thu, 30 Nov 2023 12:13:31 -0500
Subject: [PATCH] fix(kbadge): fix resize observer helper usage [KHCP-8992]

---
 src/components/KBadge/KBadge.vue | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/components/KBadge/KBadge.vue b/src/components/KBadge/KBadge.vue
index d77a65a665..790585cd62 100644
--- a/src/components/KBadge/KBadge.vue
+++ b/src/components/KBadge/KBadge.vue
@@ -33,13 +33,13 @@
 
 <script lang="ts">
 import type { PropType } from 'vue'
-import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import KButton from '@/components/KButton/KButton.vue'
 import KTooltip from '@/components/KTooltip/KTooltip.vue'
 import type { BadgeAppearance } from '@/types'
 import { BadgeAppearances, BadgeMethodAppearances } from '@/types'
 import useUtilities from '@/composables/useUtilities'
-import { resizeObserverHelper } from '@/utilities/resizeObserverHelper'
+import { ResizeObserverHelper } from '@/utilities/resizeObserverHelper'
 
 const { getSizeFromString } = useUtilities()
 
@@ -125,7 +125,7 @@ const isMethodBadge = computed(() => {
 
 const badgeTextElement = ref<HTMLDivElement>()
 
-const resizeObserver = ref()
+const resizeObserver = ref<ResizeObserverHelper>()
 const isTruncated = ref<boolean>(false)
 
 const badgeCustomStyles = computed(() => {
@@ -174,18 +174,14 @@ const showTooltip = computed((): boolean => {
 })
 
 onMounted(() => {
-  if (badgeTextElement.value) {
-    resizeObserver.value = new ResizeObserver(entries => {
-      resizeObserverHelper(entries, setTruncation)
-    })
+  resizeObserver.value = ResizeObserverHelper.create(setTruncation)
 
-    resizeObserver.value.observe(badgeTextElement.value as HTMLDivElement)
-  }
+  resizeObserver.value.observe(badgeTextElement.value as HTMLDivElement)
 })
 
-onBeforeUnmount(() => {
-  if (badgeTextElement.value) {
-    resizeObserver.value?.unobserve(badgeTextElement.value)
+onUnmounted(() => {
+  if (resizeObserver.value) {
+    resizeObserver.value.unobserve(badgeTextElement.value as HTMLDivElement)
   }
 })
 </script>