From b3eaf86e409b89cedd880c9a0f2cb643d1caa684 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 18 Jan 2023 10:24:22 +0100
Subject: [PATCH] HTMLComponent refresh on content change

---
 .../apps/components/dataDisplay/AppHtml.svelte | 18 ++++++++++--------
 .../components/selectInputs/AppSelect.svelte   | 15 +++++++++++----
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/dataDisplay/AppHtml.svelte b/frontend/src/lib/components/apps/components/dataDisplay/AppHtml.svelte
index 59f51d007e..9644b20d26 100644
--- a/frontend/src/lib/components/apps/components/dataDisplay/AppHtml.svelte
+++ b/frontend/src/lib/components/apps/components/dataDisplay/AppHtml.svelte
@@ -26,13 +26,15 @@
 >
 	<RunnableWrapper flexWrap bind:componentInput {id} bind:result>
 		<AlignWrapper {horizontalAlignment} {verticalAlignment}>
-			<iframe
-				frameborder="0"
-				style="height: {h}px; width: {w}px"
-				class="p-0"
-				title="sandbox"
-				srcdoc={result ? '<scr' + `ipt src="/tailwind.css"></script>` + result : 'No html'}
-			/></AlignWrapper
-		>
+			{#key result}
+				<iframe
+					frameborder="0"
+					style="height: {h}px; width: {w}px"
+					class="p-0"
+					title="sandbox"
+					srcdoc={result ? '<scr' + `ipt src="/tailwind.css"></script>` + result : 'No html'}
+				/>
+			{/key}
+		</AlignWrapper>
 	</RunnableWrapper>
 </div>
diff --git a/frontend/src/lib/components/apps/components/selectInputs/AppSelect.svelte b/frontend/src/lib/components/apps/components/selectInputs/AppSelect.svelte
index 0091f5f0b2..673a950e73 100644
--- a/frontend/src/lib/components/apps/components/selectInputs/AppSelect.svelte
+++ b/frontend/src/lib/components/apps/components/selectInputs/AppSelect.svelte
@@ -23,11 +23,13 @@
 		result: Output<string | undefined>
 	}
 
-	function onChange({ detail }: CustomEvent) {
-		outputs?.result.set(detail?.[itemKey] || undefined)
+	function onChange(e: CustomEvent) {
+		e?.stopPropagation()
+		window.dispatchEvent(new Event('pointerup'))
+		outputs?.result.set(e.detail?.[itemKey] || undefined)
 	}
-
-	const dispatch = createEventDispatcher()
+	let value = undefined
+	$: items?.[0]?.['value'] != value && (value = items?.[0]?.['value'])
 </script>
 
 <InputValue {id} input={configuration.label} bind:value={label} />
@@ -40,7 +42,12 @@
 		class="select"
 		on:clear={onChange}
 		on:change={onChange}
+		on:focus={(e) => {
+			e?.stopPropagation()
+			window.dispatchEvent(new Event('pointerup'))
+		}}
 		{items}
+		{value}
 		placeholder="Select an item"
 		on:click={() => {
 			if (!$connectingInput.opened) {