fix: Properly clear event listeners on component unmounts (#302)

Author: Jasenkoo

src/VueDatePicker/VueDatePicker.vue

@@ -447,6 +447,7 @@
             }
             clearInternalValues();
             emit('blur');
+            dpMenuRef.value?.$el?.remove();
         }
     };
 

src/VueDatePicker/components/ActionRow.vue

@@ -68,7 +68,7 @@
 </template>
 
 <script lang="ts" setup>
-    import { computed, onMounted, onUnmounted, ref } from 'vue';
+    import { computed, onUnmounted, onMounted, ref } from 'vue';
 
     import { checkKeyDown, convertType, unrefElement } from '@/utils/util';
     import { useArrowNavigation, useDefaults, useValidation } from '@/composables';

src/VueDatePicker/components/DatePicker/DpCalendar.vue

@@ -114,7 +114,7 @@
 </template>
 
 <script lang="ts" setup>
-    import { computed, nextTick, onMounted, ref } from 'vue';
+    import { computed, nextTick, onUnmounted, onMounted, ref } from 'vue';
     import { getISOWeek, getWeek } from 'date-fns';
 
     import {
@@ -216,6 +216,15 @@
         }
     });
 
+    onUnmounted(() => {
+        if (calendarWrapRef.value) {
+            calendarWrapRef.value.removeEventListener('touchstart', onTouchStart);
+            calendarWrapRef.value.removeEventListener('touchend', onTouchEnd);
+            calendarWrapRef.value.removeEventListener('touchmove', onTouchMove);
+            calendarWrapRef.value.removeEventListener('wheel', onScroll);
+        }
+    });
+
     const getTransitionName = (isNext: boolean) => {
         if (isNext) return props.vertical ? 'vNext' : 'next';
         return props.vertical ? 'vPrevious' : 'previous';

src/VueDatePicker/components/DatepickerMenu.vue

@@ -120,7 +120,7 @@
 </template>
 
 <script lang="ts" setup>
-    import { computed, onMounted, onUnmounted, ref, toValue, useSlots } from 'vue';
+    import { computed, onUnmounted, onMounted, ref, toValue, useSlots } from 'vue';
 
     import ActionRow from '@/components/ActionRow.vue';
 
@@ -205,35 +205,37 @@
     const dynCmpRef = ref<any>(null);
     const isMenuActive = ref(false);
 
+    const stopDefault = (event: Event) => {
+        isMenuActive.value = true;
+        if (defaultedConfig.value.allowPreventDefault) {
+            event.preventDefault();
+        }
+        checkStopPropagation(event, defaultedConfig.value, true);
+    };
+
     onMounted(() => {
         if (!props.shadow) {
             menuMount.value = true;
             getCalendarWidth();
             window.addEventListener('resize', getCalendarWidth);
 
-            const menu = unrefElement(dpMenuRef);
-            if (menu && !defaultedTextInput.value.enabled && !defaultedInline.value.enabled) {
+            if (dpMenuRef.value && !defaultedTextInput.value.enabled && !defaultedInline.value.enabled) {
                 setMenuFocused(true);
                 focusMenu();
             }
-            if (menu) {
-                const stopDefault = (event: Event) => {
-                    isMenuActive.value = true;
-                    if (defaultedConfig.value.allowPreventDefault) {
-                        event.preventDefault();
-                    }
-                    checkStopPropagation(event, defaultedConfig.value, true);
-                };
-                menu.addEventListener('pointerdown', stopDefault);
-                menu.addEventListener('mousedown', stopDefault);
+            if (dpMenuRef.value) {
+                dpMenuRef.value.addEventListener('pointerdown', stopDefault);
+                dpMenuRef.value.addEventListener('mousedown', stopDefault);
             }
         }
         document.addEventListener('mousedown', handleClickOutside);
     });
 
     onUnmounted(() => {
         window.removeEventListener('resize', getCalendarWidth);
-        document.addEventListener('mousedown', handleClickOutside);
+        document.removeEventListener('mousedown', handleClickOutside);
+        dpMenuRef.value?.removeEventListener('pointerdown', stopDefault);
+        dpMenuRef.value?.removeEventListener('mousedown', stopDefault);
     });
 
     const getCalendarWidth = (): void => {

src/VueDatePicker/directives/clickOutside.ts

@@ -33,7 +33,7 @@ const useEventListener = (
         (el) => {
             cleanup();
             if (!el) return;
-
+            el.removeEventListener(event, listener);
             el.addEventListener(event, listener, options);
 
             cleanup = () => {