fix: clear timers and animation frame request before component unmounts (#8700)

Co-authored-by: Sojan Jose <sojan@pepalo.com>

app/javascript/widget/components/ReplyToChip.vue

@@ -24,6 +24,11 @@ export default {
       default: () => {},
     },
   },
+  data() {
+    return {
+      timeOutID: null,
+    };
+  },
   computed: {
     replyToAttachment() {
       if (!this.replyTo?.attachments?.length) {
@@ -34,6 +39,10 @@ export default {
       return this.$t(`ATTACHMENTS.${fileType}.CONTENT`);
     },
   },
+
+  beforeDestroy() {
+    clearTimeout(this.timeOutID);
+  },
   methods: {
     navigateTo(id) {
       const elementId = `cwmsg-${id}`;
@@ -41,7 +50,7 @@ export default {
         const el = document.getElementById(elementId);
         el.scrollIntoView();
         el.classList.add('bg-slate-100', 'dark:bg-slate-900');
-        setTimeout(() => {
+        this.timeOutID = setTimeout(() => {
           el.classList.remove('bg-slate-100', 'dark:bg-slate-900');
         }, 500);
       });

app/javascript/widget/components/layouts/ViewWithHeader.vue

@@ -60,6 +60,7 @@ export default {
       scrollPosition: 0,
       ticking: true,
       disableBranding: window.chatwootWebChannel.disableBranding || false,
+      requestID: null,
     };
   },
   computed: {
@@ -120,6 +121,7 @@ export default {
   },
   beforeDestroy() {
     this.$el.removeEventListener('scroll', this.updateScrollPosition);
+    cancelAnimationFrame(this.requestID);
   },
   methods: {
     closeWindow() {
@@ -128,7 +130,7 @@ export default {
     updateScrollPosition(event) {
       this.scrollPosition = event.target.scrollTop;
       if (!this.ticking) {
-        window.requestAnimationFrame(() => {
+        this.requestID = window.requestAnimationFrame(() => {
           this.ticking = false;
         });