From f3d6484d97e4cd88e301cbf0ceacc31e88e71d74 Mon Sep 17 00:00:00 2001
From: Kristaps Fabians Geikins <fabis94@live.com>
Date: Wed, 1 Nov 2023 15:50:55 +0200
Subject: [PATCH] fix(fe): broken select box menu after SSR reload

---
 packages/ui-components/src/components/form/select/Base.vue | 5 ++++-
 packages/ui-components/src/helpers/common/ssr.ts           | 2 ++
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 packages/ui-components/src/helpers/common/ssr.ts

diff --git a/packages/ui-components/src/components/form/select/Base.vue b/packages/ui-components/src/components/form/select/Base.vue
index 21907641f..395d436b7 100644
--- a/packages/ui-components/src/components/form/select/Base.vue
+++ b/packages/ui-components/src/components/form/select/Base.vue
@@ -70,6 +70,7 @@
           <XMarkIcon class="w-3 h-3" />
         </button>
         <Transition
+          v-if="isMounted"
           leave-active-class="transition ease-in duration-100"
           leave-from-class="opacity-100"
           leave-to-class="opacity-0"
@@ -208,7 +209,7 @@ import { RuleExpression, useField } from 'vee-validate'
 import { nanoid } from 'nanoid'
 import CommonLoadingBar from '~~/src/components/common/loading/Bar.vue'
 import { directive as vTippy } from 'vue-tippy'
-import { useElementBounding } from '@vueuse/core'
+import { useElementBounding, useMounted } from '@vueuse/core'
 
 type ButtonStyle = 'base' | 'simple' | 'tinted'
 type ValueType = SingleItem | SingleItem[] | undefined
@@ -396,6 +397,8 @@ const { value, errorMessage: error } = useField<ValueType>(props.name, props.rul
   initialValue: props.modelValue as ValueType
 })
 
+const isMounted = useMounted()
+
 const searchInput = ref(null as Nullable<HTMLInputElement>)
 const listboxButton = ref(null as Nullable<{ el: Nullable<HTMLButtonElement> }>)
 const searchValue = ref('')
diff --git a/packages/ui-components/src/helpers/common/ssr.ts b/packages/ui-components/src/helpers/common/ssr.ts
new file mode 100644
index 000000000..678382b6f
--- /dev/null
+++ b/packages/ui-components/src/helpers/common/ssr.ts
@@ -0,0 +1,2 @@
+export const isSSR =
+  typeof window !== 'undefined' && typeof window.document !== 'undefined'