HTMLComponent refresh on content change

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>

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) {