From 2b00f7ea78472da56bb49bcc9f21cc0872d3f5c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Kov=C3=A1cs?=
 <43071496+adam-kov@users.noreply.github.com>
Date: Tue, 11 Apr 2023 13:29:55 +0200
Subject: [PATCH] fix(frontend): Fix icon picker input (#1389)

---
 .../settingsPanel/inputEditor/IconSelectInput.svelte  | 11 ++++++++---
 frontend/src/lib/components/common/popup/Popup.svelte | 11 +++++++----
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte
index a534e9f01f..4f6fb9e60f 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte
+++ b/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} />
diff --git a/frontend/src/lib/components/common/popup/Popup.svelte b/frontend/src/lib/components/common/popup/Popup.svelte
index 06ac01950d..f2615f9d94 100644
--- a/frontend/src/lib/components/common/popup/Popup.svelte
+++ b/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']