fix(frontend): Fix icon picker input (#1389)

frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte

@@ -78,6 +78,7 @@
 {#if anchor}
 	<Popup
 		ref={anchor}
+		closeOn={[]}
 		options={{ placement: 'bottom' }}
 		bind:open={openPopup}
 		let:close
@@ -87,7 +88,11 @@
 			<div class="max-w-xs shadow-[0_10px_40px_-5px_rgba(0,0,0,0.25)] bg-white rounded-md p-2">
 				{#if filteredItems}
 					<input
-						on:keydown|stopPropagation
+						on:keydown={(event) => {
+							if (!['ArrowDown', 'ArrowUp'].includes(event.key)) {
+								event.stopPropagation()
+							}
+						}}
 						bind:value={search}
 						type="text"
 						placeholder="Search"
@@ -103,8 +108,8 @@
 									select(label)
 									close()
 								}}
-								class="w-full center-center flex-col font-normal p-1 
-									hover:bg-gray-100 focus:bg-gray-100 rounded duration-200 
+								class="w-full center-center flex-col font-normal p-1
+									hover:bg-gray-100 focus:bg-gray-100 rounded duration-200
 									{label === componentInput.value ? 'text-blue-600 bg-blue-50 pointer-events-none' : ''}"
 							>
 								<svelte:component this={icon} size={22} />

frontend/src/lib/components/common/popup/Popup.svelte

@@ -69,8 +69,10 @@
 		}
 	}
 	function conditionalClosed() {
-		if (isFocusContained()) return
-		closed()
+		setTimeout(() => {
+			if (isFocusContained()) return
+			closed()
+		}, 0)
 	}
 	function openFocusOut() {
 		stateMachine.setState('open-focus-out')
@@ -80,11 +82,12 @@
 	}
 
 	function keyDown(event: KeyboardEvent & { currentTarget: EventTarget & Window }) {
-		const modifiers = ['Shift', 'Control', 'Command', 'Alt']
+		const modifiers = ['Shift', 'Control', 'Command', 'Alt', 'Meta']
 		// Prevent closing the popup when the only key pressed is a modifier key
 		if (modifiers.includes(event.key) || $stateMachine.currentState === 'closed') return
 		if (event.key === 'Escape') {
-			return (<HTMLElement>document.activeElement)?.blur()
+			;(<HTMLElement>document.activeElement)?.blur()
+			return conditionalClosed()
 		}
 
 		const prev = ['Up', 'Left']