diff --git a/frontend/src/lib/components/apps/components/layout/AppList.svelte b/frontend/src/lib/components/apps/components/layout/AppList.svelte
index 7332638318..3f324094ce 100644
--- a/frontend/src/lib/components/apps/components/layout/AppList.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppList.svelte
@@ -225,7 +225,7 @@
 									{id}
 									subGridId={`${id}-0`}
 									containerHeight={resolvedConfig.heightPx}
-									on:focus={() => {
+									onFocus={() => {
 										if (!$connectingInput.opened) {
 											$selectedComponent = [id]
 										}
diff --git a/frontend/src/lib/components/apps/components/layout/AppModal.svelte b/frontend/src/lib/components/apps/components/layout/AppModal.svelte
index 1c50c0a017..8d5adb807a 100644
--- a/frontend/src/lib/components/apps/components/layout/AppModal.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppModal.svelte
@@ -243,7 +243,7 @@
 									{id}
 									{containerHeight}
 									subGridId={`${id}-0`}
-									on:focus={() => {
+									onFocus={() => {
 										if (!$connectingInput.opened) {
 											$selectedComponent = [id]
 											$focusedGrid = {
diff --git a/frontend/src/lib/components/apps/components/layout/AppStepper.svelte b/frontend/src/lib/components/apps/components/layout/AppStepper.svelte
index a0abbad040..2b4eb183f7 100644
--- a/frontend/src/lib/components/apps/components/layout/AppStepper.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppStepper.svelte
@@ -220,7 +220,7 @@
 							class={twMerge(css?.container?.class, 'wm-stepper')}
 							style={css?.container?.style}
 							containerHeight={componentContainerHeight - tabHeight - footerHeight}
-							on:focus={() => {
+							onFocus={() => {
 								if (!$connectingInput.opened) {
 									$selectedComponent = [id]
 									handleTabSelection()