From b3c9d1f1a5f4235399413cfbf9fdeded91d71ac0 Mon Sep 17 00:00:00 2001
From: Arooba Shahoor <56495631+Arooba-git@users.noreply.github.com>
Date: Mon, 22 Jan 2024 15:38:33 +0900
Subject: [PATCH] fix: clear timers and animation frame request before
 component unmounts (#8700)

Co-authored-by: Sojan Jose <sojan@pepalo.com>
---
 .../portal/components/PublicArticleSearch.vue         |  4 ++++
 app/javascript/widget/components/ReplyToChip.vue      | 11 ++++++++++-
 .../widget/components/layouts/ViewWithHeader.vue      |  4 +++-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/app/javascript/portal/components/PublicArticleSearch.vue b/app/javascript/portal/components/PublicArticleSearch.vue
index 59dc94cf0..f75c9e644 100644
--- a/app/javascript/portal/components/PublicArticleSearch.vue
+++ b/app/javascript/portal/components/PublicArticleSearch.vue
@@ -84,6 +84,10 @@ export default {
     },
   },
 
+  beforeDestroy() {
+    clearTimeout(this.typingTimer);
+  },
+
   methods: {
     onChange(e) {
       this.$emit('input', e.target.value);
diff --git a/app/javascript/widget/components/ReplyToChip.vue b/app/javascript/widget/components/ReplyToChip.vue
index 76c250ea0..919f1bcfe 100644
--- a/app/javascript/widget/components/ReplyToChip.vue
+++ b/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);
       });
diff --git a/app/javascript/widget/components/layouts/ViewWithHeader.vue b/app/javascript/widget/components/layouts/ViewWithHeader.vue
index d0b86a30e..dad629a16 100644
--- a/app/javascript/widget/components/layouts/ViewWithHeader.vue
+++ b/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;
         });