fix(#281): Made Dropdowns always close

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;
 };

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
+  }
+}