fix(fe): broken select box menu after SSR reload

specklesystems · Nov 1, 2023 · f3d6484 · f3d6484
1 parent ad26a5b
commit f3d6484
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git 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
@@ -0,0 +1,2 @@
+export const isSSR =
+  typeof window !== 'undefined' && typeof window.document !== 'undefined'
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const isSSR =
		typeof window !== 'undefined' && typeof window.document !== 'undefined'