From 4034ab07df47f1eee5772144879858f64cd7b116 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Tue, 11 Jul 2023 17:19:14 +0200
Subject: [PATCH] fix(frontend): only forward css variable (#1856)

---
 .../apps/components/inputs/AppMultiSelect.svelte          | 3 ++-
 .../lib/components/apps/svelte-select/lib/Select.svelte   | 3 ++-
 frontend/src/lib/utils.ts                                 | 8 ++++++++
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte b/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte
index a394053058..256703009c 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte
@@ -11,6 +11,7 @@
 	import MultiSelect from 'svelte-multiselect'
 	import Portal from 'svelte-portal'
 	import { createFloatingActions } from 'svelte-floating-ui'
+	import { extractCustomProperties } from '$lib/utils'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -70,7 +71,7 @@
 		outerDiv.setAttribute('style', style)
 		// find ul in portalRef and set style
 		const ul = portalRef.querySelector('ul')
-		ul?.setAttribute('style', style)
+		ul?.setAttribute('style', extractCustomProperties(style))
 	}
 
 	$: outerDiv &&
diff --git a/frontend/src/lib/components/apps/svelte-select/lib/Select.svelte b/frontend/src/lib/components/apps/svelte-select/lib/Select.svelte
index f6c4435b28..48a8fff2e6 100644
--- a/frontend/src/lib/components/apps/svelte-select/lib/Select.svelte
+++ b/frontend/src/lib/components/apps/svelte-select/lib/Select.svelte
@@ -13,6 +13,7 @@
 	import ClearIcon from './ClearIcon.svelte'
 	import LoadingIcon from './LoadingIcon.svelte'
 	import ConditionalPortal from './ConditionalPortal.svelte'
+	import { extractCustomProperties } from '$lib/utils'
 
 	export let portal = true
 
@@ -608,7 +609,7 @@
 	{#if listOpen}
 		<ConditionalPortal condition={portal}>
 			<div
-				style={containerStyles}
+				style={extractCustomProperties(containerStyles)}
 				use:floatingContent
 				bind:this={list}
 				class="svelte-select-list"
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 2c42c0d794..077f1b546b 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -571,3 +571,11 @@ export function isObviousOwner(path: string, user?: UserExt): boolean {
 	}
 	return false
 }
+
+export function extractCustomProperties(styleStr: string): string {
+	let properties = styleStr.split(';')
+	let customProperties = properties.filter((property) => property.trim().startsWith('--'))
+	let customStyleStr = customProperties.join(';')
+
+	return customStyleStr
+}