From 93ffa8766c807a161f4c660172b786b591def0cb Mon Sep 17 00:00:00 2001
From: lxgr-linux <lxgr@protonmail.com>
Date: Mon, 18 Mar 2024 22:42:40 +0100
Subject: [PATCH] fix(#281): Made Dropdowns always close

---
 src/components/elements/Dropdown/Dropdown.vue | 17 +++++++++++++++--
 src/def-composables/useDropdown.ts            | 13 +++++++++++++
 2 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 src/def-composables/useDropdown.ts

diff --git a/src/components/elements/Dropdown/Dropdown.vue b/src/components/elements/Dropdown/Dropdown.vue
index 3ca8f0ba..066193bb 100644
--- a/src/components/elements/Dropdown/Dropdown.vue
+++ b/src/components/elements/Dropdown/Dropdown.vue
@@ -34,15 +34,18 @@
 </template>
 
 <script setup lang="ts" generic="T">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import {
   ButtonType,
   getButtonColor,
   getTextColor,
 } from "@/components/elements/CCButton/ButtonType";
+import { useDropdown } from "@/def-composables/useDropdown";
 
 const model = defineModel<T>();
 const isOpen = ref(false);
+const thisCounter = ref(0);
+const { openCounter, incCounter } = useDropdown();
 
 const props = withDefaults(
   defineProps<{
@@ -56,7 +59,7 @@ const props = withDefaults(
     initial: "?",
     displayFn: (v: T): string => "" + v,
     type: ButtonType.PUSSYRED,
-  }
+  },
 );
 
 const displayButton = () => {
@@ -67,8 +70,18 @@ const displayButton = () => {
 
 const toggleDropdown = () => {
   isOpen.value = !isOpen.value;
+  if (isOpen.value) {
+    incCounter();
+    thisCounter.value = openCounter.value;
+  }
 };
 
+watch(openCounter, (cur) => {
+  if (cur != thisCounter.value) {
+    isOpen.value = false;
+  }
+});
+
 const selectOption = (option: T) => {
   model.value = option;
 };
diff --git a/src/def-composables/useDropdown.ts b/src/def-composables/useDropdown.ts
new file mode 100644
index 00000000..7d038c47
--- /dev/null
+++ b/src/def-composables/useDropdown.ts
@@ -0,0 +1,13 @@
+import {ref, type Ref} from "vue";
+
+const openCounter: Ref<number> = ref(0)
+
+const incCounter = () => {
+  openCounter.value++
+}
+
+export const useDropdown = () => {
+  return {
+    openCounter, incCounter
+  }
+}