From 3cc8d3b810af4e63fdd05984e1c2ef24f2b23167 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 16 Dec 2024 15:50:28 +0300
Subject: [PATCH 01/23] Convert popper component to setup tag

---
 client/src/components/Popper/Popper.vue | 146 ++++++++----------------
 1 file changed, 47 insertions(+), 99 deletions(-)

diff --git a/client/src/components/Popper/Popper.vue b/client/src/components/Popper/Popper.vue
index edd74cddd609..94f1563d9161 100644
--- a/client/src/components/Popper/Popper.vue
+++ b/client/src/components/Popper/Popper.vue
@@ -22,116 +22,64 @@
     </span>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import type { PropType, UnwrapRef } from "vue";
-import { defineComponent, ref, toRef, watch } from "vue";
+import { ref, toRef, watch } from "vue";
 
 import { usePopperjs } from "./usePopper";
 
 library.add(faTimesCircle);
 
-export default defineComponent({
-    components: { FontAwesomeIcon },
-
-    props: {
-        // hook options
-        delayOnMouseout: Number,
-        delayOnMouseover: Number,
-        trigger: String as PropType<
-            Exclude<UnwrapRef<Required<Parameters<typeof usePopperjs>>["2"]["trigger"]>, "manual">
-        >,
-        forceShow: Boolean,
-        modifiers: Array as PropType<Required<Parameters<typeof usePopperjs>>["2"]["modifiers"]>,
-        onFirstUpdate: Function as PropType<Required<Parameters<typeof usePopperjs>>["2"]["onFirstUpdate"]>,
-        placement: String as PropType<Required<Parameters<typeof usePopperjs>>["2"]["placement"]>,
-        strategy: String as PropType<Required<Parameters<typeof usePopperjs>>["2"]["strategy"]>,
-
-        // component props
-        popperIs: {
-            default: "div",
-            type: String,
-        },
-        popperProps: {
-            type: Object,
-        },
-        referenceIs: {
-            default: "span",
-            type: String,
-        },
-        referenceProps: {
-            type: Object,
-        },
-        arrow: {
-            type: Boolean,
-            default: true,
-        },
-        disabled: {
-            type: Boolean,
-            default: false,
-        },
-        mode: {
-            type: String,
-            default: "dark",
-        },
-        title: {
-            type: String,
-            default: null,
-        },
-    },
+const props = defineProps({
+    delayOnMouseout: Number,
+    delayOnMouseover: Number,
+    trigger: String as PropType<Exclude<UnwrapRef<Required<Parameters<typeof usePopperjs>>["2"]["trigger"]>, "manual">>,
+    forceShow: Boolean,
+    modifiers: Array as PropType<Required<Parameters<typeof usePopperjs>>["2"]["modifiers"]>,
+    placement: String as PropType<Required<Parameters<typeof usePopperjs>>["2"]["placement"]>,
+    strategy: String as PropType<Required<Parameters<typeof usePopperjs>>["2"]["strategy"]>,
+    popperIs: { type: String, default: "div" },
+    popperProps: Object,
+    referenceIs: { type: String, default: "span" },
+    referenceProps: Object,
+    arrow: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false },
+    mode: { type: String, default: "dark" },
+    title: String,
+});
 
-    emits: [
-        "show",
-        "hide",
-        "before-enter",
-        "enter",
-        "after-enter",
-        "enter-cancelled",
-        "before-leave",
-        "leave",
-        "after-leave",
-        "leave-cancelled",
-    ],
-
-    setup(props, { emit }) {
-        const reference = ref();
-        const popper = ref();
-        const { visible } = usePopperjs(reference, popper, {
-            ...props,
-            trigger: toRef(props, "trigger"),
-            forceShow: toRef(props, "forceShow"),
-            disabled: toRef(props, "disabled"),
-            delayOnMouseover: toRef(props, "delayOnMouseover"),
-            delayOnMouseout: toRef(props, "delayOnMouseout"),
-            onShow: () => emit("show"),
-            onHide: () => emit("hide"),
-        });
-
-        watch(
-            () => [visible.value, props.disabled],
-            () => {
-                if (props.disabled && visible.value) {
-                    visible.value = false;
-                }
-            },
-            { flush: "sync" }
-        );
-
-        const handle =
-            (event: Parameters<typeof emit>[0]) =>
-            (...args: any[]) => {
-                return emit(event, ...args);
-            };
-
-        return {
-            visible,
-            reference,
-            popper,
-            handle,
-        };
+const emit = defineEmits(["show", "hide"]);
+
+const reference = ref();
+const popper = ref();
+const { visible } = usePopperjs(reference, popper, {
+    ...props,
+    trigger: toRef(props, "trigger"),
+    forceShow: toRef(props, "forceShow"),
+    disabled: toRef(props, "disabled"),
+    delayOnMouseover: toRef(props, "delayOnMouseover"),
+    delayOnMouseout: toRef(props, "delayOnMouseout"),
+    onShow: () => emit("show"),
+    onHide: () => emit("hide"),
+});
+
+watch(
+    () => [visible.value, props.disabled],
+    () => {
+        if (props.disabled && visible.value) {
+            visible.value = false;
+        }
     },
+    { flush: "sync" }
+);
+
+defineExpose({
+    visible,
+    reference,
+    popper,
 });
 </script>
 

From eef5b4433b22d691e9866655d85054bd8c7c412f Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 16 Dec 2024 15:56:06 +0300
Subject: [PATCH 02/23] Avoid using maybe ref

---
 client/src/components/Popper/Popper.vue   | 10 +++++-----
 client/src/components/Popper/usePopper.ts | 16 +++++++---------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/client/src/components/Popper/Popper.vue b/client/src/components/Popper/Popper.vue
index 94f1563d9161..ae63277171ac 100644
--- a/client/src/components/Popper/Popper.vue
+++ b/client/src/components/Popper/Popper.vue
@@ -57,11 +57,11 @@ const reference = ref();
 const popper = ref();
 const { visible } = usePopperjs(reference, popper, {
     ...props,
-    trigger: toRef(props, "trigger"),
-    forceShow: toRef(props, "forceShow"),
-    disabled: toRef(props, "disabled"),
-    delayOnMouseover: toRef(props, "delayOnMouseover"),
-    delayOnMouseout: toRef(props, "delayOnMouseout"),
+    trigger: props.trigger,
+    forceShow: props.forceShow,
+    disabled: props.disabled,
+    delayOnMouseover: props.delayOnMouseover,
+    delayOnMouseout: props.delayOnMouseout,
     onShow: () => emit("show"),
     onHide: () => emit("hide"),
 });
diff --git a/client/src/components/Popper/usePopper.ts b/client/src/components/Popper/usePopper.ts
index 229b77e3d069..2ccfcb6cf00d 100644
--- a/client/src/components/Popper/usePopper.ts
+++ b/client/src/components/Popper/usePopper.ts
@@ -1,8 +1,6 @@
 import { createPopper } from "@popperjs/core";
 import { onMounted, onUnmounted, onUpdated, type Ref, ref, unref, watch } from "vue";
 
-export type MaybeRef<T> = T | Ref<T>;
-
 export type Trigger = "hover" | "focus" | "click-to-open" | "click-to-toggle" | "manual";
 
 export type EventOptions = {
@@ -24,16 +22,16 @@ function off(element: Element, event: string, handler: EventListenerOrEventListe
 const defaultTrigger: Trigger = "hover";
 
 export function usePopperjs(
-    reference: MaybeRef<Parameters<typeof createPopper>["0"]>,
-    popper: MaybeRef<Parameters<typeof createPopper>["1"]>,
+    reference: Ref<Parameters<typeof createPopper>["0"]>,
+    popper: Ref<Parameters<typeof createPopper>["1"]>,
     options?: Partial<
         Parameters<typeof createPopper>["2"] &
             EventOptions & {
-                trigger: MaybeRef<Trigger | undefined>;
-                delayOnMouseover: MaybeRef<number | undefined>;
-                delayOnMouseout: MaybeRef<number | undefined>;
-                disabled: MaybeRef<boolean | undefined>;
-                forceShow: MaybeRef<boolean | undefined>;
+                trigger: Trigger | undefined;
+                delayOnMouseover: number | undefined;
+                delayOnMouseout: number | undefined;
+                disabled: boolean | undefined;
+                forceShow: boolean | undefined;
             }
     >
 ) {

From 5d71ee2a890a325b89ceb28f77ac172ec93afa18 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 16 Dec 2024 17:13:25 +0300
Subject: [PATCH 03/23] Stop using unref

---
 client/src/components/Popper/Popper.vue   |  2 +-
 client/src/components/Popper/usePopper.ts | 86 ++++++++++-------------
 2 files changed, 40 insertions(+), 48 deletions(-)

diff --git a/client/src/components/Popper/Popper.vue b/client/src/components/Popper/Popper.vue
index ae63277171ac..a365b549c209 100644
--- a/client/src/components/Popper/Popper.vue
+++ b/client/src/components/Popper/Popper.vue
@@ -27,7 +27,7 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import type { PropType, UnwrapRef } from "vue";
-import { ref, toRef, watch } from "vue";
+import { ref, watch } from "vue";
 
 import { usePopperjs } from "./usePopper";
 
diff --git a/client/src/components/Popper/usePopper.ts b/client/src/components/Popper/usePopper.ts
index 2ccfcb6cf00d..0975bb3321e0 100644
--- a/client/src/components/Popper/usePopper.ts
+++ b/client/src/components/Popper/usePopper.ts
@@ -54,19 +54,18 @@ export function usePopperjs(
     watch(
         () => [isMounted.value, updatedFlag.value],
         () => {
-            if (!isMounted.value) {
-                return;
-            }
-            if ((unref(reference) as any)?.$el) {
-                referenceRef.value = (unref(reference) as any).$el;
-            } else {
-                referenceRef.value = unref(reference) as Element;
-            }
-
-            if ((unref(popper) as any)?.$el) {
-                popperRef.value = (unref(popper) as any).$el;
-            } else {
-                popperRef.value = unref(popper);
+            if (isMounted.value) {
+                if ((reference.value as any)?.$el) {
+                    referenceRef.value = (reference.value as any).$el;
+                } else {
+                    referenceRef.value = reference.value as Element;
+                }
+
+                if ((popper.value as any)?.$el) {
+                    popperRef.value = (popper.value as any).$el;
+                } else {
+                    popperRef.value = popper.value;
+                }
             }
         }
     );
@@ -103,39 +102,33 @@ export function usePopperjs(
     const doOpen = () => (visible.value = true);
     const doClose = () => (visible.value = false);
     watch(
-        () => [instance.value, unref(options?.trigger), unref(options?.forceShow)],
+        () => [instance.value, options?.trigger, options?.forceShow],
         () => {
-            if (!instance.value) {
-                return;
-            }
+            if (instance.value) {
+                if (options?.forceShow) {
+                    visible.value = true;
+                    doOff();
+                    return;
+                }
 
-            if (unref(options?.forceShow)) {
-                visible.value = true;
-                doOff();
-                return;
+                doOn();
             }
-
-            doOn();
         }
     );
 
     watch(
-        () => unref(options?.forceShow),
+        () => options?.forceShow,
         () => {
-            if (unref(options?.forceShow)) {
-                return;
+            if (!options?.forceShow && options?.trigger !== "manual") {
+                visible.value = false;
             }
-            if (unref(options?.trigger) === "manual") {
-                return;
-            }
-            visible.value = false;
         }
     );
 
     watch(
-        () => unref(options?.disabled),
+        () => options?.disabled,
         () => {
-            if (unref(options?.disabled)) {
+            if (options?.disabled) {
                 doOff();
             } else {
                 doOn();
@@ -145,30 +138,30 @@ export function usePopperjs(
 
     const timer = ref<any>();
     const doMouseover = () => {
-        if (unref(options?.delayOnMouseover) === 0) {
+        if (options?.delayOnMouseover === 0) {
             doOpen();
         } else {
             clearTimeout(timer.value);
             timer.value = setTimeout(() => {
                 doOpen();
-            }, unref(options?.delayOnMouseover) ?? 100);
+            }, options?.delayOnMouseover ?? 100);
         }
     };
     const doMouseout = () => {
-        if (unref(options?.delayOnMouseout) === 0) {
+        if (options?.delayOnMouseout === 0) {
             doClose();
         } else {
             clearTimeout(timer.value);
             timer.value = setTimeout(() => {
                 doClose();
-            }, unref(options?.delayOnMouseout) ?? 100);
+            }, options?.delayOnMouseout ?? 100);
         }
     };
 
     const doOn = () => {
         doOff();
 
-        switch (unref(options?.trigger) ?? defaultTrigger) {
+        switch (options?.trigger ?? defaultTrigger) {
             case "click-to-open": {
                 on(referenceRef.value!, "click", doOpen);
                 on(document as any, "click", doCloseForDocument);
@@ -229,16 +222,15 @@ export function usePopperjs(
     watch(
         () => [instance.value, visible.value],
         () => {
-            if (!instance.value) {
-                return;
-            }
-            if (visible.value || unref(options?.forceShow)) {
-                popperRef.value?.classList.remove("vue-use-popperjs-none");
-                options?.onShow?.();
-                instance.value?.update();
-            } else {
-                popperRef.value?.classList.add("vue-use-popperjs-none");
-                options?.onHide?.();
+            if (instance.value) {
+                if (visible.value || options?.forceShow) {
+                    popperRef.value?.classList.remove("vue-use-popperjs-none");
+                    options?.onShow?.();
+                    instance.value?.update();
+                } else {
+                    popperRef.value?.classList.add("vue-use-popperjs-none");
+                    options?.onHide?.();
+                }
             }
         }
     );

From 065c4bbf6a8df4250afd703563e9e0213ba4fadf Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 16 Dec 2024 17:22:58 +0300
Subject: [PATCH 04/23] Remove unused props

---
 client/src/components/ActivityBar/ActivityItem.vue | 2 +-
 client/src/components/Popper/usePopper.ts          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityItem.vue b/client/src/components/ActivityBar/ActivityItem.vue
index fa7e67d5e8c0..d8dc9cb2e606 100644
--- a/client/src/components/ActivityBar/ActivityItem.vue
+++ b/client/src/components/ActivityBar/ActivityItem.vue
@@ -65,7 +65,7 @@ const meta = computed(() => store.metaForId(props.id));
 </script>
 
 <template>
-    <Popper reference-is="span" popper-is="span" :placement="tooltipPlacement">
+    <Popper :placement="tooltipPlacement">
         <template v-slot:reference>
             <b-nav-item
                 :id="`activity-${id}`"
diff --git a/client/src/components/Popper/usePopper.ts b/client/src/components/Popper/usePopper.ts
index 0975bb3321e0..13f17faebbc7 100644
--- a/client/src/components/Popper/usePopper.ts
+++ b/client/src/components/Popper/usePopper.ts
@@ -1,5 +1,5 @@
 import { createPopper } from "@popperjs/core";
-import { onMounted, onUnmounted, onUpdated, type Ref, ref, unref, watch } from "vue";
+import { onMounted, onUnmounted, onUpdated, type Ref, ref, watch } from "vue";
 
 export type Trigger = "hover" | "focus" | "click-to-open" | "click-to-toggle" | "manual";
 

From be84e77a5e1c7d9782dc31ae7662507a316d7d86 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 16 Dec 2024 17:40:02 +0300
Subject: [PATCH 05/23] Remove unused trigger variants

---
 client/src/components/Popper/usePopper.ts     | 22 ++-----------------
 .../src/components/Upload/UploadSettings.vue  |  2 +-
 2 files changed, 3 insertions(+), 21 deletions(-)

diff --git a/client/src/components/Popper/usePopper.ts b/client/src/components/Popper/usePopper.ts
index 13f17faebbc7..159566630d21 100644
--- a/client/src/components/Popper/usePopper.ts
+++ b/client/src/components/Popper/usePopper.ts
@@ -1,7 +1,7 @@
 import { createPopper } from "@popperjs/core";
 import { onMounted, onUnmounted, onUpdated, type Ref, ref, watch } from "vue";
 
-export type Trigger = "hover" | "focus" | "click-to-open" | "click-to-toggle" | "manual";
+export type Trigger = "hover" | "click" | "manual";
 
 export type EventOptions = {
     onShow: () => void;
@@ -98,7 +98,6 @@ export function usePopperjs(
     };
 
     const visible = ref(false);
-    const doToggle = () => (visible.value = !visible.value);
     const doOpen = () => (visible.value = true);
     const doClose = () => (visible.value = false);
     watch(
@@ -162,18 +161,12 @@ export function usePopperjs(
         doOff();
 
         switch (options?.trigger ?? defaultTrigger) {
-            case "click-to-open": {
+            case "click": {
                 on(referenceRef.value!, "click", doOpen);
                 on(document as any, "click", doCloseForDocument);
                 break;
             }
 
-            case "click-to-toggle": {
-                on(referenceRef.value!, "click", doToggle);
-                on(document as any, "click", doCloseForDocument);
-                break;
-            }
-
             case "hover": {
                 on(referenceRef.value!, "mouseover", doMouseover);
                 on(referenceRef.value!, "mouseout", doMouseout);
@@ -181,12 +174,6 @@ export function usePopperjs(
                 break;
             }
 
-            case "focus": {
-                on(referenceRef.value!, "focus", doOpen);
-                on(referenceRef.value!, "blur", doClose);
-                break;
-            }
-
             case "manual": {
                 break;
             }
@@ -200,14 +187,9 @@ export function usePopperjs(
         off(referenceRef.value!, "click", doOpen);
         off(document as any, "click", doCloseForDocument);
 
-        off(referenceRef.value!, "click", doToggle);
-
         off(referenceRef.value!, "mouseover", doMouseover);
         off(referenceRef.value!, "mouseout", doMouseout);
         off(referenceRef.value!, "mousedown", doMouseout);
-
-        off(referenceRef.value!, "focus", doOpen);
-        off(referenceRef.value!, "blur", doClose);
     };
     const doCloseForDocument = (e: Event) => {
         if (referenceRef.value?.contains(e.target as Element)) {
diff --git a/client/src/components/Upload/UploadSettings.vue b/client/src/components/Upload/UploadSettings.vue
index 9811bde3bc3c..1631973b5250 100644
--- a/client/src/components/Upload/UploadSettings.vue
+++ b/client/src/components/Upload/UploadSettings.vue
@@ -31,7 +31,7 @@ const emit = defineEmits(["input"]);
 </script>
 
 <template>
-    <Popper placement="bottom" title="Upload Configuration" mode="primary-title" trigger="click-to-open">
+    <Popper placement="bottom" title="Upload Configuration" mode="primary-title" trigger="click">
         <template v-slot:reference>
             <FontAwesomeIcon class="cursor-pointer" icon="fa-cog" />
         </template>

From 7baefb5fe1347e2f84499c100caccd4326a123ef Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 16 Dec 2024 18:02:34 +0300
Subject: [PATCH 06/23] Remove redundant force show and disabled props

---
 client/src/components/Common/ContextMenu.vue |  6 ++--
 client/src/components/Popper/Popper.vue      |  2 --
 client/src/components/Popper/usePopper.ts    | 34 ++------------------
 3 files changed, 6 insertions(+), 36 deletions(-)

diff --git a/client/src/components/Common/ContextMenu.vue b/client/src/components/Common/ContextMenu.vue
index cbcb7bc38a49..1b66c6e7fdbe 100644
--- a/client/src/components/Common/ContextMenu.vue
+++ b/client/src/components/Common/ContextMenu.vue
@@ -36,10 +36,10 @@ watch(
         <Popper
             placement="right"
             class="context-menu"
-            :style="placeContextMenu"
-            :force-show="true"
+            mode="light"
+            trigger="manual"
             :arrow="false"
-            mode="light">
+            :style="placeContextMenu">
             <div class="context-menu-slot">
                 <slot />
             </div>
diff --git a/client/src/components/Popper/Popper.vue b/client/src/components/Popper/Popper.vue
index a365b549c209..c2b1ee9e5cf7 100644
--- a/client/src/components/Popper/Popper.vue
+++ b/client/src/components/Popper/Popper.vue
@@ -58,8 +58,6 @@ const popper = ref();
 const { visible } = usePopperjs(reference, popper, {
     ...props,
     trigger: props.trigger,
-    forceShow: props.forceShow,
-    disabled: props.disabled,
     delayOnMouseover: props.delayOnMouseover,
     delayOnMouseout: props.delayOnMouseout,
     onShow: () => emit("show"),
diff --git a/client/src/components/Popper/usePopper.ts b/client/src/components/Popper/usePopper.ts
index 159566630d21..8f8edad15884 100644
--- a/client/src/components/Popper/usePopper.ts
+++ b/client/src/components/Popper/usePopper.ts
@@ -1,7 +1,7 @@
 import { createPopper } from "@popperjs/core";
 import { onMounted, onUnmounted, onUpdated, type Ref, ref, watch } from "vue";
 
-export type Trigger = "hover" | "click" | "manual";
+export type Trigger = "click" | "hover" | "manual";
 
 export type EventOptions = {
     onShow: () => void;
@@ -30,8 +30,6 @@ export function usePopperjs(
                 trigger: Trigger | undefined;
                 delayOnMouseover: number | undefined;
                 delayOnMouseout: number | undefined;
-                disabled: boolean | undefined;
-                forceShow: boolean | undefined;
             }
     >
 ) {
@@ -101,35 +99,9 @@ export function usePopperjs(
     const doOpen = () => (visible.value = true);
     const doClose = () => (visible.value = false);
     watch(
-        () => [instance.value, options?.trigger, options?.forceShow],
+        () => [instance.value, options?.trigger],
         () => {
             if (instance.value) {
-                if (options?.forceShow) {
-                    visible.value = true;
-                    doOff();
-                    return;
-                }
-
-                doOn();
-            }
-        }
-    );
-
-    watch(
-        () => options?.forceShow,
-        () => {
-            if (!options?.forceShow && options?.trigger !== "manual") {
-                visible.value = false;
-            }
-        }
-    );
-
-    watch(
-        () => options?.disabled,
-        () => {
-            if (options?.disabled) {
-                doOff();
-            } else {
                 doOn();
             }
         }
@@ -205,7 +177,7 @@ export function usePopperjs(
         () => [instance.value, visible.value],
         () => {
             if (instance.value) {
-                if (visible.value || options?.forceShow) {
+                if (visible.value) {
                     popperRef.value?.classList.remove("vue-use-popperjs-none");
                     options?.onShow?.();
                     instance.value?.update();

From 03436f79d78f1fcaf6f4533a579c2b3de7f710b7 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 16 Dec 2024 20:22:05 +0300
Subject: [PATCH 07/23] Consolidate watchers

---
 client/src/components/Popper/usePopper.ts | 84 ++++++++++++-----------
 1 file changed, 44 insertions(+), 40 deletions(-)

diff --git a/client/src/components/Popper/usePopper.ts b/client/src/components/Popper/usePopper.ts
index 8f8edad15884..4fff940b3d72 100644
--- a/client/src/components/Popper/usePopper.ts
+++ b/client/src/components/Popper/usePopper.ts
@@ -49,39 +49,8 @@ export function usePopperjs(
 
     const referenceRef = ref<Element>();
     const popperRef = ref<HTMLElement>();
-    watch(
-        () => [isMounted.value, updatedFlag.value],
-        () => {
-            if (isMounted.value) {
-                if ((reference.value as any)?.$el) {
-                    referenceRef.value = (reference.value as any).$el;
-                } else {
-                    referenceRef.value = reference.value as Element;
-                }
-
-                if ((popper.value as any)?.$el) {
-                    popperRef.value = (popper.value as any).$el;
-                } else {
-                    popperRef.value = popper.value;
-                }
-            }
-        }
-    );
-
     const instance = ref<ReturnType<typeof createPopper>>();
-    watch(
-        () => [referenceRef.value, popperRef.value],
-        () => {
-            destroy();
-            if (!referenceRef.value) {
-                return;
-            }
-            if (!popperRef.value) {
-                return;
-            }
-            concrete();
-        }
-    );
+
     const concrete = () => {
         instance.value = createPopper(referenceRef.value!, popperRef.value!, {
             placement: options?.placement ?? "bottom",
@@ -90,6 +59,7 @@ export function usePopperjs(
             onFirstUpdate: options?.onFirstUpdate ?? undefined,
         });
     };
+
     const destroy = () => {
         instance.value?.destroy();
         instance.value = undefined;
@@ -98,16 +68,9 @@ export function usePopperjs(
     const visible = ref(false);
     const doOpen = () => (visible.value = true);
     const doClose = () => (visible.value = false);
-    watch(
-        () => [instance.value, options?.trigger],
-        () => {
-            if (instance.value) {
-                doOn();
-            }
-        }
-    );
 
     const timer = ref<any>();
+
     const doMouseover = () => {
         if (options?.delayOnMouseover === 0) {
             doOpen();
@@ -118,6 +81,7 @@ export function usePopperjs(
             }, options?.delayOnMouseover ?? 100);
         }
     };
+
     const doMouseout = () => {
         if (options?.delayOnMouseout === 0) {
             doClose();
@@ -155,6 +119,7 @@ export function usePopperjs(
             }
         }
     };
+
     const doOff = () => {
         off(referenceRef.value!, "click", doOpen);
         off(document as any, "click", doCloseForDocument);
@@ -163,6 +128,7 @@ export function usePopperjs(
         off(referenceRef.value!, "mouseout", doMouseout);
         off(referenceRef.value!, "mousedown", doMouseout);
     };
+
     const doCloseForDocument = (e: Event) => {
         if (referenceRef.value?.contains(e.target as Element)) {
             return;
@@ -173,6 +139,44 @@ export function usePopperjs(
         doClose();
     };
 
+    watch(
+        () => [isMounted.value, updatedFlag.value],
+        () => {
+            if (isMounted.value) {
+                if ((reference.value as any)?.$el) {
+                    referenceRef.value = (reference.value as any).$el;
+                } else {
+                    referenceRef.value = reference.value as Element;
+                }
+
+                if ((popper.value as any)?.$el) {
+                    popperRef.value = (popper.value as any).$el;
+                } else {
+                    popperRef.value = popper.value;
+                }
+            }
+        }
+    );
+
+    watch(
+        () => [referenceRef.value, popperRef.value],
+        () => {
+            destroy();
+            if (referenceRef.value && popperRef.value) {
+                concrete();
+            }
+        }
+    );
+
+    watch(
+        () => [instance.value, options?.trigger],
+        () => {
+            if (instance.value) {
+                doOn();
+            }
+        }
+    );
+
     watch(
         () => [instance.value, visible.value],
         () => {

From b36640baecfa114625abd1bb6620e2f6e278ab52 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 16 Dec 2024 20:32:54 +0300
Subject: [PATCH 08/23] Remove unnecessary helpers

---
 client/src/components/Popper/usePopper.ts | 77 +++++++++--------------
 1 file changed, 30 insertions(+), 47 deletions(-)

diff --git a/client/src/components/Popper/usePopper.ts b/client/src/components/Popper/usePopper.ts
index 4fff940b3d72..c7b975945e32 100644
--- a/client/src/components/Popper/usePopper.ts
+++ b/client/src/components/Popper/usePopper.ts
@@ -8,17 +8,6 @@ export type EventOptions = {
     onHide: () => void;
 };
 
-function on(element: Element, event: string, handler: EventListenerOrEventListenerObject) {
-    if (element && event && handler) {
-        element.addEventListener(event, handler, false);
-    }
-}
-function off(element: Element, event: string, handler: EventListenerOrEventListenerObject) {
-    if (element && event) {
-        element.removeEventListener(event, handler, false);
-    }
-}
-
 const defaultTrigger: Trigger = "hover";
 
 export function usePopperjs(
@@ -94,39 +83,42 @@ export function usePopperjs(
     };
 
     const doOn = () => {
-        doOff();
-
-        switch (options?.trigger ?? defaultTrigger) {
-            case "click": {
-                on(referenceRef.value!, "click", doOpen);
-                on(document as any, "click", doCloseForDocument);
-                break;
-            }
+        if (referenceRef.value) {
+            doOff();
+
+            switch (options?.trigger ?? defaultTrigger) {
+                case "click": {
+                    referenceRef.value.addEventListener("click", doOpen);
+                    document.addEventListener("click", doCloseForDocument);
+                    break;
+                }
 
-            case "hover": {
-                on(referenceRef.value!, "mouseover", doMouseover);
-                on(referenceRef.value!, "mouseout", doMouseout);
-                on(referenceRef.value!, "mousedown", doMouseout);
-                break;
-            }
+                case "hover": {
+                    referenceRef.value.addEventListener("mousedown", doMouseout);
+                    referenceRef.value.addEventListener("mouseout", doMouseout);
+                    referenceRef.value.addEventListener("mouseover", doMouseover);
+                    break;
+                }
 
-            case "manual": {
-                break;
-            }
+                case "manual": {
+                    break;
+                }
 
-            default: {
-                throw TypeError();
+                default: {
+                    throw TypeError();
+                }
             }
         }
     };
 
     const doOff = () => {
-        off(referenceRef.value!, "click", doOpen);
-        off(document as any, "click", doCloseForDocument);
-
-        off(referenceRef.value!, "mouseover", doMouseover);
-        off(referenceRef.value!, "mouseout", doMouseout);
-        off(referenceRef.value!, "mousedown", doMouseout);
+        document.removeEventListener("click", doCloseForDocument, false);
+        if (referenceRef.value) {
+            referenceRef.value.removeEventListener("click", doOpen, false);
+            referenceRef.value.removeEventListener("mousedown", doMouseout, false);
+            referenceRef.value.removeEventListener("mouseover", doMouseover, false);
+            referenceRef.value.removeEventListener("mouseout", doMouseout, false);
+        }
     };
 
     const doCloseForDocument = (e: Event) => {
@@ -143,17 +135,8 @@ export function usePopperjs(
         () => [isMounted.value, updatedFlag.value],
         () => {
             if (isMounted.value) {
-                if ((reference.value as any)?.$el) {
-                    referenceRef.value = (reference.value as any).$el;
-                } else {
-                    referenceRef.value = reference.value as Element;
-                }
-
-                if ((popper.value as any)?.$el) {
-                    popperRef.value = (popper.value as any).$el;
-                } else {
-                    popperRef.value = popper.value;
-                }
+                referenceRef.value = reference.value as Element;
+                popperRef.value = popper.value;
             }
         }
     );

From f596bcce287f1c77540040d51184a9be2624000f Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 16 Dec 2024 20:46:47 +0300
Subject: [PATCH 09/23] Consolidate popper creation and removal

---
 client/src/components/Popper/usePopper.ts | 144 +++++++---------------
 1 file changed, 47 insertions(+), 97 deletions(-)

diff --git a/client/src/components/Popper/usePopper.ts b/client/src/components/Popper/usePopper.ts
index c7b975945e32..977c83d2844c 100644
--- a/client/src/components/Popper/usePopper.ts
+++ b/client/src/components/Popper/usePopper.ts
@@ -1,5 +1,5 @@
 import { createPopper } from "@popperjs/core";
-import { onMounted, onUnmounted, onUpdated, type Ref, ref, watch } from "vue";
+import { onMounted, onUnmounted, type Ref, ref, watch } from "vue";
 
 export type Trigger = "click" | "hover" | "manual";
 
@@ -11,8 +11,8 @@ export type EventOptions = {
 const defaultTrigger: Trigger = "hover";
 
 export function usePopperjs(
-    reference: Ref<Parameters<typeof createPopper>["0"]>,
-    popper: Ref<Parameters<typeof createPopper>["1"]>,
+    reference: Ref<HTMLElement>,
+    popper: Ref<HTMLElement>,
     options?: Partial<
         Parameters<typeof createPopper>["2"] &
             EventOptions & {
@@ -22,42 +22,60 @@ export function usePopperjs(
             }
     >
 ) {
-    const isMounted = ref(false);
-    onMounted(() => {
-        isMounted.value = true;
-    });
-    onUnmounted(() => {
-        isMounted.value = false;
-        destroy();
-    });
-
-    const updatedFlag = ref(true);
-    onUpdated(() => {
-        updatedFlag.value = !updatedFlag.value;
-    });
-
-    const referenceRef = ref<Element>();
-    const popperRef = ref<HTMLElement>();
     const instance = ref<ReturnType<typeof createPopper>>();
 
-    const concrete = () => {
-        instance.value = createPopper(referenceRef.value!, popperRef.value!, {
+    onMounted(() => {
+        // create instance
+        instance.value = createPopper(reference.value, popper.value!, {
             placement: options?.placement ?? "bottom",
             modifiers: options?.modifiers ?? [],
             strategy: options?.strategy ?? "absolute",
             onFirstUpdate: options?.onFirstUpdate ?? undefined,
         });
-    };
 
-    const destroy = () => {
+        // attach event handlers
+        switch (options?.trigger ?? defaultTrigger) {
+            case "click": {
+                reference.value.addEventListener("click", doOpen);
+                document.addEventListener("click", doCloseForDocument);
+                break;
+            }
+
+            case "hover": {
+                reference.value.addEventListener("mousedown", doMouseout);
+                reference.value.addEventListener("mouseout", doMouseout);
+                reference.value.addEventListener("mouseover", doMouseover);
+                break;
+            }
+
+            case "manual": {
+                break;
+            }
+
+            default: {
+                throw TypeError();
+            }
+        }
+    });
+
+    onUnmounted(() => {
+        // destroy instance
         instance.value?.destroy();
         instance.value = undefined;
-    };
+
+        // remove event handlers
+        document.removeEventListener("click", doCloseForDocument, false);
+        if (reference.value) {
+            reference.value.removeEventListener("click", doOpen, false);
+            reference.value.removeEventListener("mousedown", doMouseout, false);
+            reference.value.removeEventListener("mouseover", doMouseover, false);
+            reference.value.removeEventListener("mouseout", doMouseout, false);
+        }
+    });
 
     const visible = ref(false);
     const doOpen = () => (visible.value = true);
     const doClose = () => (visible.value = false);
-
     const timer = ref<any>();
 
     const doMouseover = () => {
@@ -82,94 +100,26 @@ export function usePopperjs(
         }
     };
 
-    const doOn = () => {
-        if (referenceRef.value) {
-            doOff();
-
-            switch (options?.trigger ?? defaultTrigger) {
-                case "click": {
-                    referenceRef.value.addEventListener("click", doOpen);
-                    document.addEventListener("click", doCloseForDocument);
-                    break;
-                }
-
-                case "hover": {
-                    referenceRef.value.addEventListener("mousedown", doMouseout);
-                    referenceRef.value.addEventListener("mouseout", doMouseout);
-                    referenceRef.value.addEventListener("mouseover", doMouseover);
-                    break;
-                }
-
-                case "manual": {
-                    break;
-                }
-
-                default: {
-                    throw TypeError();
-                }
-            }
-        }
-    };
-
-    const doOff = () => {
-        document.removeEventListener("click", doCloseForDocument, false);
-        if (referenceRef.value) {
-            referenceRef.value.removeEventListener("click", doOpen, false);
-            referenceRef.value.removeEventListener("mousedown", doMouseout, false);
-            referenceRef.value.removeEventListener("mouseover", doMouseover, false);
-            referenceRef.value.removeEventListener("mouseout", doMouseout, false);
-        }
-    };
-
     const doCloseForDocument = (e: Event) => {
-        if (referenceRef.value?.contains(e.target as Element)) {
+        if (reference.value?.contains(e.target as Element)) {
             return;
         }
-        if (popperRef.value?.contains(e.target as Element)) {
+        if (popper.value?.contains(e.target as Element)) {
             return;
         }
         doClose();
     };
 
-    watch(
-        () => [isMounted.value, updatedFlag.value],
-        () => {
-            if (isMounted.value) {
-                referenceRef.value = reference.value as Element;
-                popperRef.value = popper.value;
-            }
-        }
-    );
-
-    watch(
-        () => [referenceRef.value, popperRef.value],
-        () => {
-            destroy();
-            if (referenceRef.value && popperRef.value) {
-                concrete();
-            }
-        }
-    );
-
-    watch(
-        () => [instance.value, options?.trigger],
-        () => {
-            if (instance.value) {
-                doOn();
-            }
-        }
-    );
-
     watch(
         () => [instance.value, visible.value],
         () => {
             if (instance.value) {
                 if (visible.value) {
-                    popperRef.value?.classList.remove("vue-use-popperjs-none");
+                    popper.value?.classList.remove("vue-use-popperjs-none");
                     options?.onShow?.();
                     instance.value?.update();
                 } else {
-                    popperRef.value?.classList.add("vue-use-popperjs-none");
+                    popper.value?.classList.add("vue-use-popperjs-none");
                     options?.onHide?.();
                 }
             }

From 800de83e34a7a9cd211d7b13f96cc41171a2599a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 16 Dec 2024 20:55:29 +0300
Subject: [PATCH 10/23] Consolidate options

---
 client/src/components/Popper/Popper.vue   |  4 +---
 client/src/components/Popper/usePopper.ts | 22 ++++++++++------------
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Popper/Popper.vue b/client/src/components/Popper/Popper.vue
index c2b1ee9e5cf7..65617beff438 100644
--- a/client/src/components/Popper/Popper.vue
+++ b/client/src/components/Popper/Popper.vue
@@ -38,9 +38,7 @@ const props = defineProps({
     delayOnMouseover: Number,
     trigger: String as PropType<Exclude<UnwrapRef<Required<Parameters<typeof usePopperjs>>["2"]["trigger"]>, "manual">>,
     forceShow: Boolean,
-    modifiers: Array as PropType<Required<Parameters<typeof usePopperjs>>["2"]["modifiers"]>,
     placement: String as PropType<Required<Parameters<typeof usePopperjs>>["2"]["placement"]>,
-    strategy: String as PropType<Required<Parameters<typeof usePopperjs>>["2"]["strategy"]>,
     popperIs: { type: String, default: "div" },
     popperProps: Object,
     referenceIs: { type: String, default: "span" },
@@ -56,7 +54,7 @@ const emit = defineEmits(["show", "hide"]);
 const reference = ref();
 const popper = ref();
 const { visible } = usePopperjs(reference, popper, {
-    ...props,
+    placement: props.placement,
     trigger: props.trigger,
     delayOnMouseover: props.delayOnMouseover,
     delayOnMouseout: props.delayOnMouseout,
diff --git a/client/src/components/Popper/usePopper.ts b/client/src/components/Popper/usePopper.ts
index 977c83d2844c..f61e5f86a4ed 100644
--- a/client/src/components/Popper/usePopper.ts
+++ b/client/src/components/Popper/usePopper.ts
@@ -1,4 +1,4 @@
-import { createPopper } from "@popperjs/core";
+import { createPopper, type Placement } from "@popperjs/core";
 import { onMounted, onUnmounted, type Ref, ref, watch } from "vue";
 
 export type Trigger = "click" | "hover" | "manual";
@@ -13,14 +13,14 @@ const defaultTrigger: Trigger = "hover";
 export function usePopperjs(
     reference: Ref<HTMLElement>,
     popper: Ref<HTMLElement>,
-    options?: Partial<
-        Parameters<typeof createPopper>["2"] &
-            EventOptions & {
-                trigger: Trigger | undefined;
-                delayOnMouseover: number | undefined;
-                delayOnMouseout: number | undefined;
-            }
-    >
+    options: {
+        placement: Placement | undefined;
+        trigger: Trigger | undefined;
+        delayOnMouseover: number | undefined;
+        delayOnMouseout: number | undefined;
+        onShow: () => void;
+        onHide: () => void;
+    }
 ) {
     const instance = ref<ReturnType<typeof createPopper>>();
 
@@ -28,9 +28,7 @@ export function usePopperjs(
         // create instance
         instance.value = createPopper(reference.value, popper.value!, {
             placement: options?.placement ?? "bottom",
-            modifiers: options?.modifiers ?? [],
-            strategy: options?.strategy ?? "absolute",
-            onFirstUpdate: options?.onFirstUpdate ?? undefined,
+            strategy: "absolute",
         });
 
         // attach event handlers

From baf74d82acaa7e4b91562f6d3cd14028af43d6f7 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 16 Dec 2024 20:57:54 +0300
Subject: [PATCH 11/23] Remove unused mouse delay props

---
 client/src/components/Popper/Popper.vue   |  4 ---
 client/src/components/Popper/usePopper.ts | 37 ++++-------------------
 2 files changed, 6 insertions(+), 35 deletions(-)

diff --git a/client/src/components/Popper/Popper.vue b/client/src/components/Popper/Popper.vue
index 65617beff438..52d56c18797a 100644
--- a/client/src/components/Popper/Popper.vue
+++ b/client/src/components/Popper/Popper.vue
@@ -34,8 +34,6 @@ import { usePopperjs } from "./usePopper";
 library.add(faTimesCircle);
 
 const props = defineProps({
-    delayOnMouseout: Number,
-    delayOnMouseover: Number,
     trigger: String as PropType<Exclude<UnwrapRef<Required<Parameters<typeof usePopperjs>>["2"]["trigger"]>, "manual">>,
     forceShow: Boolean,
     placement: String as PropType<Required<Parameters<typeof usePopperjs>>["2"]["placement"]>,
@@ -56,8 +54,6 @@ const popper = ref();
 const { visible } = usePopperjs(reference, popper, {
     placement: props.placement,
     trigger: props.trigger,
-    delayOnMouseover: props.delayOnMouseover,
-    delayOnMouseout: props.delayOnMouseout,
     onShow: () => emit("show"),
     onHide: () => emit("hide"),
 });
diff --git a/client/src/components/Popper/usePopper.ts b/client/src/components/Popper/usePopper.ts
index f61e5f86a4ed..16f4e5c9a14d 100644
--- a/client/src/components/Popper/usePopper.ts
+++ b/client/src/components/Popper/usePopper.ts
@@ -16,8 +16,6 @@ export function usePopperjs(
     options: {
         placement: Placement | undefined;
         trigger: Trigger | undefined;
-        delayOnMouseover: number | undefined;
-        delayOnMouseout: number | undefined;
         onShow: () => void;
         onHide: () => void;
     }
@@ -40,9 +38,9 @@ export function usePopperjs(
             }
 
             case "hover": {
-                reference.value.addEventListener("mousedown", doMouseout);
-                reference.value.addEventListener("mouseout", doMouseout);
-                reference.value.addEventListener("mouseover", doMouseover);
+                reference.value.addEventListener("mousedown", doClose);
+                reference.value.addEventListener("mouseout", doClose);
+                reference.value.addEventListener("mouseover", doOpen);
                 break;
             }
 
@@ -65,38 +63,15 @@ export function usePopperjs(
         document.removeEventListener("click", doCloseForDocument, false);
         if (reference.value) {
             reference.value.removeEventListener("click", doOpen, false);
-            reference.value.removeEventListener("mousedown", doMouseout, false);
-            reference.value.removeEventListener("mouseover", doMouseover, false);
-            reference.value.removeEventListener("mouseout", doMouseout, false);
+            reference.value.removeEventListener("mousedown", doClose, false);
+            reference.value.removeEventListener("mouseout", doClose, false);
+            reference.value.removeEventListener("mouseover", doOpen, false);
         }
     });
 
     const visible = ref(false);
     const doOpen = () => (visible.value = true);
     const doClose = () => (visible.value = false);
-    const timer = ref<any>();
-
-    const doMouseover = () => {
-        if (options?.delayOnMouseover === 0) {
-            doOpen();
-        } else {
-            clearTimeout(timer.value);
-            timer.value = setTimeout(() => {
-                doOpen();
-            }, options?.delayOnMouseover ?? 100);
-        }
-    };
-
-    const doMouseout = () => {
-        if (options?.delayOnMouseout === 0) {
-            doClose();
-        } else {
-            clearTimeout(timer.value);
-            timer.value = setTimeout(() => {
-                doClose();
-            }, options?.delayOnMouseout ?? 100);
-        }
-    };
 
     const doCloseForDocument = (e: Event) => {
         if (reference.value?.contains(e.target as Element)) {

From 3166ce77c9d0504a54157999635c8da25f7f0a9c Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 16 Dec 2024 20:59:51 +0300
Subject: [PATCH 12/23] Remove unused show/hide emit handlers

---
 client/src/components/Popper/Popper.vue   | 4 ----
 client/src/components/Popper/usePopper.ts | 9 ---------
 2 files changed, 13 deletions(-)

diff --git a/client/src/components/Popper/Popper.vue b/client/src/components/Popper/Popper.vue
index 52d56c18797a..65d60f260e81 100644
--- a/client/src/components/Popper/Popper.vue
+++ b/client/src/components/Popper/Popper.vue
@@ -47,15 +47,11 @@ const props = defineProps({
     title: String,
 });
 
-const emit = defineEmits(["show", "hide"]);
-
 const reference = ref();
 const popper = ref();
 const { visible } = usePopperjs(reference, popper, {
     placement: props.placement,
     trigger: props.trigger,
-    onShow: () => emit("show"),
-    onHide: () => emit("hide"),
 });
 
 watch(
diff --git a/client/src/components/Popper/usePopper.ts b/client/src/components/Popper/usePopper.ts
index 16f4e5c9a14d..07b5d84d90a6 100644
--- a/client/src/components/Popper/usePopper.ts
+++ b/client/src/components/Popper/usePopper.ts
@@ -3,11 +3,6 @@ import { onMounted, onUnmounted, type Ref, ref, watch } from "vue";
 
 export type Trigger = "click" | "hover" | "manual";
 
-export type EventOptions = {
-    onShow: () => void;
-    onHide: () => void;
-};
-
 const defaultTrigger: Trigger = "hover";
 
 export function usePopperjs(
@@ -16,8 +11,6 @@ export function usePopperjs(
     options: {
         placement: Placement | undefined;
         trigger: Trigger | undefined;
-        onShow: () => void;
-        onHide: () => void;
     }
 ) {
     const instance = ref<ReturnType<typeof createPopper>>();
@@ -89,11 +82,9 @@ export function usePopperjs(
             if (instance.value) {
                 if (visible.value) {
                     popper.value?.classList.remove("vue-use-popperjs-none");
-                    options?.onShow?.();
                     instance.value?.update();
                 } else {
                     popper.value?.classList.add("vue-use-popperjs-none");
-                    options?.onHide?.();
                 }
             }
         }

From a784f2a61ab1ff0c09c9a7a55fbeb9da921efdec Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 16 Dec 2024 21:02:30 +0300
Subject: [PATCH 13/23] Consolidate close handler

---
 client/src/components/Popper/usePopper.ts | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Popper/usePopper.ts b/client/src/components/Popper/usePopper.ts
index 07b5d84d90a6..249484e7b7bf 100644
--- a/client/src/components/Popper/usePopper.ts
+++ b/client/src/components/Popper/usePopper.ts
@@ -67,13 +67,9 @@ export function usePopperjs(
     const doClose = () => (visible.value = false);
 
     const doCloseForDocument = (e: Event) => {
-        if (reference.value?.contains(e.target as Element)) {
-            return;
+        if (!reference.value?.contains(e.target as Element) && !popper.value?.contains(e.target as Element)) {
+            visible.value = false;
         }
-        if (popper.value?.contains(e.target as Element)) {
-            return;
-        }
-        doClose();
     };
 
     watch(

From 4b038524d28c27a02ae3da0d9f92171540fe271d Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 17 Dec 2024 13:15:37 +0300
Subject: [PATCH 14/23] Move refs to top

---
 client/src/components/Popper/usePopper.ts | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Popper/usePopper.ts b/client/src/components/Popper/usePopper.ts
index 249484e7b7bf..3eb705dbcc21 100644
--- a/client/src/components/Popper/usePopper.ts
+++ b/client/src/components/Popper/usePopper.ts
@@ -14,6 +14,15 @@ export function usePopperjs(
     }
 ) {
     const instance = ref<ReturnType<typeof createPopper>>();
+    const visible = ref(false);
+
+    const doOpen = () => (visible.value = true);
+    const doClose = () => (visible.value = false);
+    const doCloseForDocument = (e: Event) => {
+        if (!reference.value?.contains(e.target as Element) && !popper.value?.contains(e.target as Element)) {
+            visible.value = false;
+        }
+    };
 
     onMounted(() => {
         // create instance
@@ -62,16 +71,6 @@ export function usePopperjs(
         }
     });
 
-    const visible = ref(false);
-    const doOpen = () => (visible.value = true);
-    const doClose = () => (visible.value = false);
-
-    const doCloseForDocument = (e: Event) => {
-        if (!reference.value?.contains(e.target as Element) && !popper.value?.contains(e.target as Element)) {
-            visible.value = false;
-        }
-    };
-
     watch(
         () => [instance.value, visible.value],
         () => {

From 78012afdbd9102cd5a32fc6804f667ae0fc4fd1b Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 17 Dec 2024 13:21:34 +0300
Subject: [PATCH 15/23] Update when available

---
 client/src/components/Popper/usePopper.ts | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/client/src/components/Popper/usePopper.ts b/client/src/components/Popper/usePopper.ts
index 3eb705dbcc21..22c7da1cb33b 100644
--- a/client/src/components/Popper/usePopper.ts
+++ b/client/src/components/Popper/usePopper.ts
@@ -74,14 +74,7 @@ export function usePopperjs(
     watch(
         () => [instance.value, visible.value],
         () => {
-            if (instance.value) {
-                if (visible.value) {
-                    popper.value?.classList.remove("vue-use-popperjs-none");
-                    instance.value?.update();
-                } else {
-                    popper.value?.classList.add("vue-use-popperjs-none");
-                }
-            }
+            instance.value?.update();
         }
     );
 

From 6da9693513222f5ebf2ff27ba695fa41b0baad1d Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 17 Dec 2024 13:25:34 +0300
Subject: [PATCH 16/23] Import prop types directly

---
 client/src/components/Popper/Popper.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Popper/Popper.vue b/client/src/components/Popper/Popper.vue
index 65d60f260e81..379a55d42b06 100644
--- a/client/src/components/Popper/Popper.vue
+++ b/client/src/components/Popper/Popper.vue
@@ -26,25 +26,25 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import type { PropType, UnwrapRef } from "vue";
+import type { PropType } from "vue";
 import { ref, watch } from "vue";
-
-import { usePopperjs } from "./usePopper";
+import { type Placement } from "@popperjs/core";
+import { usePopperjs, type Trigger } from "./usePopper";
 
 library.add(faTimesCircle);
 
 const props = defineProps({
-    trigger: String as PropType<Exclude<UnwrapRef<Required<Parameters<typeof usePopperjs>>["2"]["trigger"]>, "manual">>,
+    arrow: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false },
     forceShow: Boolean,
-    placement: String as PropType<Required<Parameters<typeof usePopperjs>>["2"]["placement"]>,
+    mode: { type: String, default: "dark" },
+    placement: String as PropType<Placement>,
     popperIs: { type: String, default: "div" },
     popperProps: Object,
     referenceIs: { type: String, default: "span" },
     referenceProps: Object,
-    arrow: { type: Boolean, default: true },
-    disabled: { type: Boolean, default: false },
-    mode: { type: String, default: "dark" },
     title: String,
+    trigger: String as PropType<Trigger>,
 });
 
 const reference = ref();

From 110550dd110d8850e1f7632a4842d25c07e96c90 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 17 Dec 2024 13:30:26 +0300
Subject: [PATCH 17/23] Remove unused props from popper component

---
 client/src/components/Popper/Popper.vue | 20 +++++---------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Popper/Popper.vue b/client/src/components/Popper/Popper.vue
index 379a55d42b06..c32663bb7c7a 100644
--- a/client/src/components/Popper/Popper.vue
+++ b/client/src/components/Popper/Popper.vue
@@ -1,15 +1,9 @@
 <template>
     <span>
-        <component :is="referenceIs" v-bind="referenceProps" ref="reference">
+        <span ref="reference">
             <slot name="reference" />
-        </component>
-        <component
-            :is="popperIs"
-            v-show="visible"
-            v-bind="popperProps"
-            ref="popper"
-            class="popper-element mt-1"
-            :class="`popper-element-${mode}`">
+        </span>
+        <div v-show="visible" ref="popper" class="popper-element mt-1" :class="`popper-element-${mode}`">
             <div v-if="arrow" class="popper-arrow" data-popper-arrow />
             <div v-if="title" class="popper-header px-2 py-1 rounded-top d-flex justify-content-between">
                 <span class="px-1">{{ title }}</span>
@@ -18,7 +12,7 @@
                 </span>
             </div>
             <slot />
-        </component>
+        </div>
     </span>
 </template>
 
@@ -36,19 +30,15 @@ library.add(faTimesCircle);
 const props = defineProps({
     arrow: { type: Boolean, default: true },
     disabled: { type: Boolean, default: false },
-    forceShow: Boolean,
     mode: { type: String, default: "dark" },
     placement: String as PropType<Placement>,
-    popperIs: { type: String, default: "div" },
-    popperProps: Object,
-    referenceIs: { type: String, default: "span" },
-    referenceProps: Object,
     title: String,
     trigger: String as PropType<Trigger>,
 });
 
 const reference = ref();
 const popper = ref();
+
 const { visible } = usePopperjs(reference, popper, {
     placement: props.placement,
     trigger: props.trigger,

From 096ac5ba30c768947a9d291514e387d8e6d3f102 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 17 Dec 2024 13:52:12 +0300
Subject: [PATCH 18/23] Ensure that all added events are removed when unmounted

---
 client/src/components/Popper/usePopper.ts | 27 +++++++++++++----------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Popper/usePopper.ts b/client/src/components/Popper/usePopper.ts
index 22c7da1cb33b..b61b9d89d3f8 100644
--- a/client/src/components/Popper/usePopper.ts
+++ b/client/src/components/Popper/usePopper.ts
@@ -15,6 +15,7 @@ export function usePopperjs(
 ) {
     const instance = ref<ReturnType<typeof createPopper>>();
     const visible = ref(false);
+    const listeners : any = [];
 
     const doOpen = () => (visible.value = true);
     const doClose = () => (visible.value = false);
@@ -24,6 +25,11 @@ export function usePopperjs(
         }
     };
 
+    function addEventListener(target: any, event: string, handler: any) {
+        target.addEventListener(event, handler);
+        listeners.push({ target, event, handler });
+    }
+
     onMounted(() => {
         // create instance
         instance.value = createPopper(reference.value, popper.value!, {
@@ -34,15 +40,15 @@ export function usePopperjs(
         // attach event handlers
         switch (options?.trigger ?? defaultTrigger) {
             case "click": {
-                reference.value.addEventListener("click", doOpen);
-                document.addEventListener("click", doCloseForDocument);
+                addEventListener(reference.value, "click", doOpen);
+                addEventListener(document, "click", doCloseForDocument);
                 break;
             }
 
             case "hover": {
-                reference.value.addEventListener("mousedown", doClose);
-                reference.value.addEventListener("mouseout", doClose);
-                reference.value.addEventListener("mouseover", doOpen);
+                addEventListener(reference.value, "mousedown", doClose);
+                addEventListener(reference.value, "mouseout", doClose);
+                addEventListener(reference.value, "mouseover", doOpen);
                 break;
             }
 
@@ -62,13 +68,10 @@ export function usePopperjs(
         instance.value = undefined;
 
         // remove event handlers
-        document.removeEventListener("click", doCloseForDocument, false);
-        if (reference.value) {
-            reference.value.removeEventListener("click", doOpen, false);
-            reference.value.removeEventListener("mousedown", doClose, false);
-            reference.value.removeEventListener("mouseout", doClose, false);
-            reference.value.removeEventListener("mouseover", doOpen, false);
-        }
+        listeners.forEach((l: any) => {
+            l.target.removeEventListener(l.event, l.handler);
+        });
+        listeners.length = 0;
     });
 
     watch(

From de7ad24609d7f308b3cb196e67894094958aaa70 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 17 Dec 2024 13:54:14 +0300
Subject: [PATCH 19/23] Typescript will already throw an error if an invalid
 trigger is used

---
 client/src/components/Popper/usePopper.ts | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/client/src/components/Popper/usePopper.ts b/client/src/components/Popper/usePopper.ts
index b61b9d89d3f8..7c2b0e2fdfcc 100644
--- a/client/src/components/Popper/usePopper.ts
+++ b/client/src/components/Popper/usePopper.ts
@@ -51,14 +51,6 @@ export function usePopperjs(
                 addEventListener(reference.value, "mouseover", doOpen);
                 break;
             }
-
-            case "manual": {
-                break;
-            }
-
-            default: {
-                throw TypeError();
-            }
         }
     });
 
@@ -71,7 +63,6 @@ export function usePopperjs(
         listeners.forEach((l: any) => {
             l.target.removeEventListener(l.event, l.handler);
         });
-        listeners.length = 0;
     });
 
     watch(

From adeddbed9e25ad602afcb0f1e173cd3adbc29c36 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 17 Dec 2024 13:57:52 +0300
Subject: [PATCH 20/23] Replace switch, add typing

---
 client/src/components/Popper/usePopper.ts | 63 +++++++----------------
 1 file changed, 19 insertions(+), 44 deletions(-)

diff --git a/client/src/components/Popper/usePopper.ts b/client/src/components/Popper/usePopper.ts
index 7c2b0e2fdfcc..db76d8980492 100644
--- a/client/src/components/Popper/usePopper.ts
+++ b/client/src/components/Popper/usePopper.ts
@@ -1,79 +1,54 @@
 import { createPopper, type Placement } from "@popperjs/core";
 import { onMounted, onUnmounted, type Ref, ref, watch } from "vue";
 
-export type Trigger = "click" | "hover" | "manual";
+export type Trigger = "click" | "hover" | "none";
 
 const defaultTrigger: Trigger = "hover";
 
 export function usePopperjs(
     reference: Ref<HTMLElement>,
     popper: Ref<HTMLElement>,
-    options: {
-        placement: Placement | undefined;
-        trigger: Trigger | undefined;
-    }
+    options: { placement?: Placement; trigger?: Trigger }
 ) {
     const instance = ref<ReturnType<typeof createPopper>>();
     const visible = ref(false);
-    const listeners : any = [];
+    const listeners: Array<{ target: EventTarget; event: string; handler: EventListener }> = [];
 
     const doOpen = () => (visible.value = true);
     const doClose = () => (visible.value = false);
     const doCloseForDocument = (e: Event) => {
-        if (!reference.value?.contains(e.target as Element) && !popper.value?.contains(e.target as Element)) {
+        if (!reference.value?.contains(e.target as Node) && !popper.value?.contains(e.target as Node))
             visible.value = false;
-        }
     };
 
-    function addEventListener(target: any, event: string, handler: any) {
+    const addEventListener = (target: EventTarget, event: string, handler: EventListener) => {
         target.addEventListener(event, handler);
         listeners.push({ target, event, handler });
-    }
+    };
 
     onMounted(() => {
-        // create instance
-        instance.value = createPopper(reference.value, popper.value!, {
-            placement: options?.placement ?? "bottom",
+        instance.value = createPopper(reference.value, popper.value, {
+            placement: options.placement ?? "bottom",
             strategy: "absolute",
         });
 
-        // attach event handlers
-        switch (options?.trigger ?? defaultTrigger) {
-            case "click": {
-                addEventListener(reference.value, "click", doOpen);
-                addEventListener(document, "click", doCloseForDocument);
-                break;
-            }
-
-            case "hover": {
-                addEventListener(reference.value, "mousedown", doClose);
-                addEventListener(reference.value, "mouseout", doClose);
-                addEventListener(reference.value, "mouseover", doOpen);
-                break;
-            }
+        const trigger = options.trigger ?? defaultTrigger;
+        if (trigger === "click") {
+            addEventListener(reference.value, "click", doOpen);
+            addEventListener(document, "click", doCloseForDocument);
+        } else if (trigger === "hover") {
+            addEventListener(reference.value, "mouseover", doOpen);
+            addEventListener(reference.value, "mouseout", doClose);
         }
     });
 
     onUnmounted(() => {
-        // destroy instance
         instance.value?.destroy();
-        instance.value = undefined;
-
-        // remove event handlers
-        listeners.forEach((l: any) => {
-            l.target.removeEventListener(l.event, l.handler);
-        });
+        listeners.forEach(({ target, event, handler }) => target.removeEventListener(event, handler));
+        listeners.length = 0;
     });
 
-    watch(
-        () => [instance.value, visible.value],
-        () => {
-            instance.value?.update();
-        }
-    );
+    watch([instance, visible], () => instance.value?.update());
 
-    return {
-        instance,
-        visible,
-    };
+    return { instance, visible };
 }

From 4988a1d85f980b239db893adf888ee241a7f1351 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 17 Dec 2024 14:35:32 +0300
Subject: [PATCH 21/23] Add use popper test case

---
 client/src/components/Popper/Popper.vue       |  4 +-
 .../src/components/Popper/usePopper.test.js   | 68 +++++++++++++++++++
 client/src/components/Popper/usePopper.ts     |  2 +-
 3 files changed, 71 insertions(+), 3 deletions(-)
 create mode 100644 client/src/components/Popper/usePopper.test.js

diff --git a/client/src/components/Popper/Popper.vue b/client/src/components/Popper/Popper.vue
index c32663bb7c7a..c6c886128ba0 100644
--- a/client/src/components/Popper/Popper.vue
+++ b/client/src/components/Popper/Popper.vue
@@ -23,7 +23,7 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import type { PropType } from "vue";
 import { ref, watch } from "vue";
 import { type Placement } from "@popperjs/core";
-import { usePopperjs, type Trigger } from "./usePopper";
+import { usePopper, type Trigger } from "./usePopper";
 
 library.add(faTimesCircle);
 
@@ -39,7 +39,7 @@ const props = defineProps({
 const reference = ref();
 const popper = ref();
 
-const { visible } = usePopperjs(reference, popper, {
+const { visible } = usePopper(reference, popper, {
     placement: props.placement,
     trigger: props.trigger,
 });
diff --git a/client/src/components/Popper/usePopper.test.js b/client/src/components/Popper/usePopper.test.js
new file mode 100644
index 000000000000..8da301ee7bc9
--- /dev/null
+++ b/client/src/components/Popper/usePopper.test.js
@@ -0,0 +1,68 @@
+import { mount } from "@vue/test-utils";
+import { ref, nextTick } from "vue";
+import { createPopper } from "@popperjs/core";
+import { usePopper } from "./usePopper";
+
+jest.mock("@popperjs/core", () => ({
+    createPopper: jest.fn(() => ({
+        destroy: jest.fn(),
+        update: jest.fn(),
+    })),
+}));
+
+describe("usePopper", () => {
+    let referenceElement;
+    let popperElement;
+
+    beforeEach(() => {
+        referenceElement = document.createElement("div");
+        document.body.appendChild(referenceElement);
+
+        popperElement = document.createElement("div");
+        document.body.appendChild(popperElement);
+    });
+
+    afterEach(() => {
+        document.body.innerHTML = "";
+        jest.clearAllMocks();
+    });
+
+    const createTestComponent = (trigger = "none") => {
+        return mount({
+            template: "<div></div>",
+            setup() {
+                const reference = ref(referenceElement);
+                const popper = ref(popperElement);
+                const options = { placement: "bottom", trigger };
+                const { visible, instance } = usePopper(reference, popper, options);
+                return { visible, instance };
+            },
+        });
+    };
+
+    test("should initialize Popper instance on mount", () => {
+        createTestComponent();
+        expect(createPopper).toHaveBeenCalledWith(referenceElement, popperElement, {
+            placement: "bottom",
+            strategy: "absolute",
+        });
+    });
+
+    test("should destroy Popper instance on unmount", () => {
+        const wrapper = createTestComponent();
+        const popperInstance = createPopper.mock.results[0].value;
+        wrapper.destroy();
+        expect(popperInstance.destroy).toHaveBeenCalled();
+    });
+
+    test("should not change visibility for trigger 'none'", async () => {
+        const wrapper = createTestComponent("none");
+        const { visible } = wrapper.vm;
+
+        expect(visible).toBe(false);
+
+        referenceElement.dispatchEvent(new Event("click"));
+        await nextTick();
+        expect(visible).toBe(false);
+    });
+});
diff --git a/client/src/components/Popper/usePopper.ts b/client/src/components/Popper/usePopper.ts
index db76d8980492..adac4ed5c3b3 100644
--- a/client/src/components/Popper/usePopper.ts
+++ b/client/src/components/Popper/usePopper.ts
@@ -5,7 +5,7 @@ export type Trigger = "click" | "hover" | "none";
 
 const defaultTrigger: Trigger = "hover";
 
-export function usePopperjs(
+export function usePopper(
     reference: Ref<HTMLElement>,
     popper: Ref<HTMLElement>,
     options: { placement?: Placement; trigger?: Trigger }

From 1261381f082c904008a3e10aaebbd8e303afffcf Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 17 Dec 2024 15:01:41 +0300
Subject: [PATCH 22/23] Add test cases for popper vue component

---
 client/src/components/Popper/Popper.test.js | 122 ++++++++++++++++++++
 1 file changed, 122 insertions(+)
 create mode 100644 client/src/components/Popper/Popper.test.js

diff --git a/client/src/components/Popper/Popper.test.js b/client/src/components/Popper/Popper.test.js
new file mode 100644
index 000000000000..ff7139ea232a
--- /dev/null
+++ b/client/src/components/Popper/Popper.test.js
@@ -0,0 +1,122 @@
+import { mount } from "@vue/test-utils";
+import PopperComponent from "./Popper.vue";
+import { createPopper } from "@popperjs/core";
+
+jest.mock("@popperjs/core", () => ({
+    createPopper: jest.fn(() => ({
+        destroy: jest.fn(),
+        update: jest.fn(),
+    })),
+}));
+
+function mountTarget(trigger = "click") {
+    return mount(PopperComponent, {
+        propsData: {
+            title: "Test Title",
+            placement: "bottom",
+            trigger: trigger,
+        },
+        slots: {
+            reference: "<button>Reference</button>",
+            default: "<p>Popper Content</p>",
+        },
+    });
+}
+
+describe("PopperComponent.vue", () => {
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    test("renders component with default props", async () => {
+        const wrapper = mountTarget();
+        expect(wrapper.find(".popper-element").exists()).toBe(true);
+        expect(wrapper.find(".popper-element").isVisible()).toBe(false);
+        const reference = wrapper.find("button");
+        await reference.trigger("click");
+        expect(wrapper.find(".popper-header").exists()).toBe(true);
+        expect(wrapper.find(".popper-header").text()).toContain("Test Title");
+    });
+
+    test("opens and closes popper on click trigger", async () => {
+        const wrapper = mountTarget();
+        const reference = wrapper.find("button");
+        expect(wrapper.find(".popper-element").isVisible()).toBe(false);
+        await reference.trigger("click");
+        expect(wrapper.find(".popper-element").isVisible()).toBe(true);
+        await wrapper.find(".popper-close").trigger("click");
+        expect(wrapper.find(".popper-element").isVisible()).toBe(false);
+    });
+
+    test("disables popper when `disabled` prop is true", async () => {
+        const wrapper = mountTarget();
+        await wrapper.setProps({ disabled: true });
+        const reference = wrapper.find("button");
+        await reference.trigger("click");
+        expect(wrapper.find(".popper-element").isVisible()).toBe(false);
+    });
+
+    test("renders the arrow when `arrow` prop is true", () => {
+        const wrapper = mountTarget();
+        expect(wrapper.find(".popper-arrow").exists()).toBe(true);
+    });
+
+    test("does not render the arrow when `arrow` prop is false", async () => {
+        const wrapper = mountTarget();
+        await wrapper.setProps({ arrow: false });
+        expect(wrapper.find(".popper-arrow").exists()).toBe(false);
+    });
+
+    test("applies correct mode class", async () => {
+        const wrapper = mountTarget();
+        await wrapper.setProps({ mode: "light" });
+        expect(wrapper.find(".popper-element").classes()).toContain("popper-element-light");
+        await wrapper.setProps({ mode: "dark" });
+        expect(wrapper.find(".popper-element").classes()).toContain("popper-element-dark");
+    });
+
+    test("uses correct placement prop", () => {
+        mountTarget();
+        expect(createPopper).toHaveBeenCalledWith(
+            expect.anything(),
+            expect.anything(),
+            expect.objectContaining({ placement: "bottom" })
+        );
+    });
+
+    test("updates visibility when props or watchers change", async () => {
+        const wrapper = mountTarget();
+        await wrapper.setProps({ disabled: false });
+        const reference = wrapper.find("button");
+        await reference.trigger("click");
+        expect(wrapper.find(".popper-element").isVisible()).toBe(true);
+        await wrapper.setProps({ disabled: true });
+        expect(wrapper.find(".popper-element").isVisible()).toBe(false);
+    });
+
+    test("shows and hides popper on hover trigger", async () => {
+        const wrapper = mountTarget("hover");
+        const reference = wrapper.find("button");
+        const popperElement = wrapper.find(".popper-element");
+        expect(popperElement.isVisible()).toBe(false);
+        await reference.trigger("mouseover");
+        expect(popperElement.isVisible()).toBe(true);
+        await reference.trigger("mouseout");
+        expect(popperElement.isVisible()).toBe(false);
+    });
+
+    test("popper remains visible when clicked inside of popper", async () => {
+        const wrapper = mountTarget("click");
+        const reference = wrapper.find("button");
+        const popperElement = wrapper.find(".popper-element");
+        expect(popperElement.isVisible()).toBe(false);
+        await reference.trigger("click");
+        expect(popperElement.isVisible()).toBe(true);
+        await popperElement.trigger("mouseover");
+        expect(popperElement.isVisible()).toBe(true);
+        await popperElement.trigger("mouseout");
+        expect(popperElement.isVisible()).toBe(true);
+        await popperElement.trigger("click");
+        expect(popperElement.isVisible()).toBe(true);
+    });
+});

From ce4d988b604f5157fd430d0aee04754ef01a51b0 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 17 Dec 2024 15:25:23 +0300
Subject: [PATCH 23/23] Lint

---
 client/src/components/Popper/Popper.test.js    | 3 ++-
 client/src/components/Popper/Popper.vue        | 5 +++--
 client/src/components/Popper/usePopper.test.js | 5 +++--
 client/src/components/Popper/usePopper.ts      | 3 ++-
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Popper/Popper.test.js b/client/src/components/Popper/Popper.test.js
index ff7139ea232a..f9115cde2139 100644
--- a/client/src/components/Popper/Popper.test.js
+++ b/client/src/components/Popper/Popper.test.js
@@ -1,6 +1,7 @@
+import { createPopper } from "@popperjs/core";
 import { mount } from "@vue/test-utils";
+
 import PopperComponent from "./Popper.vue";
-import { createPopper } from "@popperjs/core";
 
 jest.mock("@popperjs/core", () => ({
     createPopper: jest.fn(() => ({
diff --git a/client/src/components/Popper/Popper.vue b/client/src/components/Popper/Popper.vue
index c6c886128ba0..4a6c870918da 100644
--- a/client/src/components/Popper/Popper.vue
+++ b/client/src/components/Popper/Popper.vue
@@ -20,10 +20,11 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { type Placement } from "@popperjs/core";
 import type { PropType } from "vue";
 import { ref, watch } from "vue";
-import { type Placement } from "@popperjs/core";
-import { usePopper, type Trigger } from "./usePopper";
+
+import { type Trigger, usePopper } from "./usePopper";
 
 library.add(faTimesCircle);
 
diff --git a/client/src/components/Popper/usePopper.test.js b/client/src/components/Popper/usePopper.test.js
index 8da301ee7bc9..662138e88f3d 100644
--- a/client/src/components/Popper/usePopper.test.js
+++ b/client/src/components/Popper/usePopper.test.js
@@ -1,6 +1,7 @@
-import { mount } from "@vue/test-utils";
-import { ref, nextTick } from "vue";
 import { createPopper } from "@popperjs/core";
+import { mount } from "@vue/test-utils";
+import { nextTick, ref } from "vue";
+
 import { usePopper } from "./usePopper";
 
 jest.mock("@popperjs/core", () => ({
diff --git a/client/src/components/Popper/usePopper.ts b/client/src/components/Popper/usePopper.ts
index adac4ed5c3b3..c5c06acdd740 100644
--- a/client/src/components/Popper/usePopper.ts
+++ b/client/src/components/Popper/usePopper.ts
@@ -17,8 +17,9 @@ export function usePopper(
     const doOpen = () => (visible.value = true);
     const doClose = () => (visible.value = false);
     const doCloseForDocument = (e: Event) => {
-        if (!reference.value?.contains(e.target as Node) && !popper.value?.contains(e.target as Node))
+        if (!reference.value?.contains(e.target as Node) && !popper.value?.contains(e.target as Node)) {
             visible.value = false;
+        }
     };
 
     const addEventListener = (target: EventTarget, event: string, handler: EventListener) => {