From 1aff573453f28867a19cb93f2a61bf949ec71a4f Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 21 Nov 2023 20:28:04 +0300
Subject: [PATCH] Refactor #4819

---
 components/lib/megamenu/MegaMenu.vue | 33 +++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/components/lib/megamenu/MegaMenu.vue b/components/lib/megamenu/MegaMenu.vue
index 1764b6e99..ac1854d2d 100755
--- a/components/lib/megamenu/MegaMenu.vue
+++ b/components/lib/megamenu/MegaMenu.vue
@@ -65,6 +65,7 @@ export default {
     emits: ['focus', 'blur'],
     outsideClickListener: null,
     resizeListener: null,
+    matchMediaListener: null,
     container: null,
     menubar: null,
     searchTimeout: null,
@@ -77,6 +78,7 @@ export default {
             focusedItemInfo: { index: -1, key: '', parentKey: '' },
             activeItem: null,
             dirty: false,
+            query: null,
             queryMatches: false
         };
     },
@@ -96,19 +98,13 @@ export default {
     },
     mounted() {
         this.id = this.id || UniqueComponentId();
-        const query = matchMedia(`(max-width: ${this.breakpoint})`);
-
-        this.queryMatches = query.matches;
-
-        query.addEventListener('change', () => {
-            this.queryMatches = query.matches;
-            this.mobileActive = false;
-        });
+        this.bindMatchMediaListener();
     },
     beforeUnmount() {
         this.mobileActive = false;
         this.unbindOutsideClickListener();
         this.unbindResizeListener();
+        this.unbindMatchMediaListener();
     },
     methods: {
         getItemProp(item, name) {
@@ -490,6 +486,27 @@ export default {
                 this.resizeListener = null;
             }
         },
+        bindMatchMediaListener() {
+            if (!this.matchMediaListener) {
+                const query = matchMedia(`(max-width: ${this.breakpoint})`);
+
+                this.query = query;
+                this.queryMatches = query.matches;
+
+                this.matchMediaListener = () => {
+                    this.queryMatches = query.matches;
+                    this.mobileActive = false;
+                };
+
+                this.query.addEventListener('change', this.matchMediaListener);
+            }
+        },
+        unbindMatchMediaListener() {
+            if (this.matchMediaListener) {
+                this.query.removeEventListener('change', this.matchMediaListener);
+                this.matchMediaListener = null;
+            }
+        },
         isItemMatched(processedItem) {
             return this.isValidItem(processedItem) && this.getProccessedItemLabel(processedItem).toLocaleLowerCase().startsWith(this.searchValue.toLocaleLowerCase());
         },