From 9075b6501a07c802f504fde41b11f737ecbdeab7 Mon Sep 17 00:00:00 2001
From: MiniDigger | Martin <admin@minidigger.dev>
Date: Fri, 3 Jan 2025 17:31:32 +0100
Subject: [PATCH] fix: improve "fading out" of error tooltips, closes #1181

---
 .../src/components/design/ErrorTooltip.vue     | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/design/ErrorTooltip.vue b/frontend/src/components/design/ErrorTooltip.vue
index f4be2b8fa..3c4766e49 100644
--- a/frontend/src/components/design/ErrorTooltip.vue
+++ b/frontend/src/components/design/ErrorTooltip.vue
@@ -6,23 +6,20 @@ const props = defineProps<{
   errorMessages?: (string | ErrorObject)[];
 }>();
 
-const formattedError = computed<string | Ref<string>>(() => {
+const formattedError = computed<string | Ref<string> | undefined>(() => {
   if (!props.errorMessages || props.errorMessages.length === 0) {
-    return "";
+    // eslint-disable-next-line unicorn/no-useless-undefined
+    return undefined;
   }
   return isErrorObject(props.errorMessages[0]) ? props.errorMessages[0].$message : props.errorMessages[0];
 });
-
-const hasError = computed<boolean>(() => {
-  return props.errorMessages ? props.errorMessages.length > 0 : false;
-});
 </script>
 
 <template>
   <!-- hardcoding the id is meh, but else hydration breaks and it doesn't actually seem to be used for accessibility? -->
   <Tooltip
     v-bind="$attrs"
-    :shown="hasError"
+    :shown="Boolean(formattedError)"
     theme="error-tooltip"
     :triggers="[]"
     :delay="0"
@@ -30,15 +27,20 @@ const hasError = computed<boolean>(() => {
     class="text-center reset-popper"
     aria-id="tooltip"
     :container="false"
+    handle-resize
   >
     <slot />
     <template #popper>
-      {{ formattedError || "error" }}
+      {{ formattedError }}
     </template>
   </Tooltip>
 </template>
 
 <style>
+.v-popper--theme-error-tooltip {
+  transition-duration: 0s !important;
+}
+
 .v-popper--theme-error-tooltip .v-popper__inner {
   max-width: 700px;
   background-color: #d62e22;