From af8ffcbf71c3f1870d491f5b18b419ffa489731b Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Thu, 21 Jul 2022 18:10:21 +0530
Subject: [PATCH] fix: window-drag on Windows - remove listener on unmounting
 outside click

---
 src/components/PageHeader.vue         | 15 ++++-------
 src/pages/SetupWizard/SetupWizard.vue |  5 +++-
 src/renderer/helpers.ts               | 36 +++++++++++++++------------
 3 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/src/components/PageHeader.vue b/src/components/PageHeader.vue
index 49ac4cbd..130ffa11 100644
--- a/src/components/PageHeader.vue
+++ b/src/components/PageHeader.vue
@@ -1,15 +1,10 @@
 <template>
   <div
-    class="
-      px-4
-      flex
-      justify-between
-      window-drag
-      items-center
-      h-row-largest
-      flex-shrink-0
-    "
-    :class="border ? 'border-b' : ''"
+    class="px-4 flex justify-between items-center h-row-largest flex-shrink-0"
+    :class="[
+      border ? 'border-b' : '',
+      platform !== 'Windows' ? 'window-drag' : '',
+    ]"
   >
     <h1 class="text-xl font-semibold select-none" v-if="title">
       {{ title }}
diff --git a/src/pages/SetupWizard/SetupWizard.vue b/src/pages/SetupWizard/SetupWizard.vue
index 33cdcf29..9d99d830 100644
--- a/src/pages/SetupWizard/SetupWizard.vue
+++ b/src/pages/SetupWizard/SetupWizard.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="flex-1 bg-gray-25 flex justify-center items-center window-drag">
+  <div
+    class="flex-1 bg-gray-25 flex justify-center items-center window-drag"
+    :class="{ 'window-drag': platform !== 'Windows' }"
+  >
     <!-- Setup Wizard Slide -->
     <Slide
       :primary-disabled="!valuesFilled || loading"
diff --git a/src/renderer/helpers.ts b/src/renderer/helpers.ts
index 71806b39..42c655bf 100644
--- a/src/renderer/helpers.ts
+++ b/src/renderer/helpers.ts
@@ -1,35 +1,39 @@
 import { Directive } from 'vue';
 
-const instances: OutsideClickCallback[] = [];
 type OutsideClickCallback = (e: Event) => void;
+const instanceMap: Map<HTMLElement, OutsideClickCallback> = new Map();
 
 export const outsideClickDirective: Directive<
   HTMLElement,
   OutsideClickCallback
 > = {
   beforeMount(el, binding) {
-    el.dataset.outsideClickIndex = String(instances.length);
-
-    const fn = binding.value;
-    const click = function (e: Event) {
-      onDocumentClick(e, el, fn);
+    const clickHandler = function (e: Event) {
+      onDocumentClick(e, el, binding.value);
     };
 
-    document.addEventListener('click', click);
-    instances.push(click);
+    removeHandlerIfPresent(el);
+    instanceMap.set(el, clickHandler);
+    document.addEventListener('click', clickHandler);
   },
   unmounted(el) {
-    const index = parseInt(el.dataset.outsideClickIndex ?? '0');
-    const handler = instances[index];
-    document.addEventListener('click', handler);
-    instances.splice(index, 1);
+    removeHandlerIfPresent(el);
   },
 };
 
 function onDocumentClick(e: Event, el: HTMLElement, fn: OutsideClickCallback) {
-  const target = e.target;
-
-  if (el !== target && !el.contains(target as Node)) {
-    fn(e);
+  const target = e.target as Node;
+  if (el !== target && !el.contains(target)) {
+    fn?.(e);
   }
 }
+
+function removeHandlerIfPresent(el: HTMLElement) {
+  const clickHandler = instanceMap.get(el);
+  if (!clickHandler) {
+    return;
+  }
+
+  instanceMap.delete(el);
+  document.removeEventListener('click', clickHandler);
+}