From 623a8f62eeafb93211f7b202e9a37cfd4b08f7a0 Mon Sep 17 00:00:00 2001
From: Sriman Achanta <68172138+srimanachanta@users.noreply.github.com>
Date: Thu, 20 Jul 2023 14:00:05 -0400
Subject: [PATCH] Remove color picker event listener when threshold tab is
 unmounted

should occur when the dashboard is left because all pipeline config tabs are kept alive to persist changing settings and state
---
 .../dashboard/PipelineConfigTabs/ThresholdTab.vue         | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/photon-client/src/components/dashboard/PipelineConfigTabs/ThresholdTab.vue b/photon-client/src/components/dashboard/PipelineConfigTabs/ThresholdTab.vue
index 357dc51910..7688ba4aec 100644
--- a/photon-client/src/components/dashboard/PipelineConfigTabs/ThresholdTab.vue
+++ b/photon-client/src/components/dashboard/PipelineConfigTabs/ThresholdTab.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
-import { computed, getCurrentInstance, onMounted } from "vue";
+import { computed, getCurrentInstance, onBeforeUnmount, onMounted } from "vue";
 import CvRangeSlider from "@/components/common/cv-range-slider.vue";
 import CvSwitch from "@/components/common/cv-switch.vue";
 import { useStateStore } from "@/stores/StateStore";
@@ -101,6 +101,12 @@ onMounted(() => {
 
   cameraStream.addEventListener("click", handleStreamClick);
 });
+onBeforeUnmount(() => {
+  const cameraStream = document.getElementById("input-camera-stream");
+  if(cameraStream === null) return;
+
+  cameraStream.removeEventListener("click", handleStreamClick);
+});
 
 const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.breakpoint.mdAndDown || false) && (!useStateStore().sidebarFolded || useCameraSettingsStore().isDriverMode)) ? 9 : 8;
 </script>