From 64b5d384ed544136e2c08a66b1e49c1c0beaea7b Mon Sep 17 00:00:00 2001
From: Ryan Hamamura <58859899+ryanhamamura@users.noreply.github.com>
Date: Mon, 2 Mar 2026 23:05:11 -1000
Subject: [PATCH] fix: use correct Datastar keydown event syntax

Replace invalid .key_enter and .enter modifiers with evt.key === 'Enter'
guard in the expression, per Datastar docs. Also fix __stop and __throttle
modifier syntax to use double underscores.
---
 chat/components/chat.templ              | 5 ++---
 features/auth/pages/login.templ         | 4 ++--
 features/auth/pages/register.templ      | 6 +++---
 features/common/components/shared.templ | 2 +-
 features/lobby/pages/lobby.templ        | 2 +-
 features/snakegame/pages/game.templ     | 2 +-
 6 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/chat/components/chat.templ b/chat/components/chat.templ
index ec10136..f2d02fe 100644
--- a/chat/components/chat.templ
+++ b/chat/components/chat.templ
@@ -42,8 +42,7 @@ templ Chat(messages []chat.Message, cfg Config) {
 					placeholder="Chat..."
 					autocomplete="off"
 					data-bind="chatMsg"
-					data-on:keydown.stop=""
-				data-on:keydown.key_enter={ datastar.PostSSE("%s", cfg.PostURL) }
+					data-on:keydown__stop={ "evt.key === 'Enter' && " + datastar.PostSSE("%s", cfg.PostURL) }
 			/>
 		} else {
 			<input
@@ -51,7 +50,7 @@ templ Chat(messages []chat.Message, cfg Config) {
 				placeholder="Chat..."
 				autocomplete="off"
 				data-bind="chatMsg"
-				data-on:keydown.enter={ datastar.PostSSE("%s", cfg.PostURL) }
+				data-on:keydown={ "evt.key === 'Enter' && " + datastar.PostSSE("%s", cfg.PostURL) }
 			/>
 		}
 		<button
diff --git a/features/auth/pages/login.templ b/features/auth/pages/login.templ
index 8a93ff9..b159492 100644
--- a/features/auth/pages/login.templ
+++ b/features/auth/pages/login.templ
@@ -20,7 +20,7 @@ templ LoginPage() {
 						type="text"
 						placeholder="Enter your username"
 					data-bind="username"
-					data-on:keydown.key_enter={ datastar.PostSSE("/auth/login") }
+					data-on:keydown={ "evt.key === 'Enter' && " + datastar.PostSSE("/auth/login") }
 					autofocus
 				/>
 					<label class="label" for="password">Password</label>
@@ -30,7 +30,7 @@ templ LoginPage() {
 						type="password"
 						placeholder="Enter your password"
 						data-bind="password"
-						data-on:keydown.key_enter={ datastar.PostSSE("/auth/login") }
+						data-on:keydown={ "evt.key === 'Enter' && " + datastar.PostSSE("/auth/login") }
 					/>
 				</fieldset>
 				<button
diff --git a/features/auth/pages/register.templ b/features/auth/pages/register.templ
index 92fd0c4..dab31e1 100644
--- a/features/auth/pages/register.templ
+++ b/features/auth/pages/register.templ
@@ -20,7 +20,7 @@ templ RegisterPage() {
 						type="text"
 						placeholder="Choose a username"
 					data-bind="username"
-					data-on:keydown.key_enter={ datastar.PostSSE("/auth/register") }
+					data-on:keydown={ "evt.key === 'Enter' && " + datastar.PostSSE("/auth/register") }
 					autofocus
 				/>
 					<label class="label" for="password">Password</label>
@@ -30,7 +30,7 @@ templ RegisterPage() {
 						type="password"
 						placeholder="Choose a password (min 8 chars)"
 					data-bind="password"
-					data-on:keydown.key_enter={ datastar.PostSSE("/auth/register") }
+					data-on:keydown={ "evt.key === 'Enter' && " + datastar.PostSSE("/auth/register") }
 				/>
 					<label class="label" for="confirm">Confirm Password</label>
 					<input
@@ -39,7 +39,7 @@ templ RegisterPage() {
 						type="password"
 						placeholder="Confirm your password"
 						data-bind="confirm"
-						data-on:keydown.key_enter={ datastar.PostSSE("/auth/register") }
+						data-on:keydown={ "evt.key === 'Enter' && " + datastar.PostSSE("/auth/register") }
 					/>
 				</fieldset>
 				<button
diff --git a/features/common/components/shared.templ b/features/common/components/shared.templ
index 7d0b631..5567f93 100644
--- a/features/common/components/shared.templ
+++ b/features/common/components/shared.templ
@@ -28,7 +28,7 @@ templ NicknamePrompt(returnPath string) {
 					type="text"
 					placeholder="Enter your nickname"
 					data-bind="nickname"
-					data-on:keydown.key_enter={ datastar.PostSSE("%s", returnPath) }
+					data-on:keydown={ "evt.key === 'Enter' && " + datastar.PostSSE("%s", returnPath) }
 					required
 					autofocus
 				/>
diff --git a/features/lobby/pages/lobby.templ b/features/lobby/pages/lobby.templ
index c2dde2e..b6186df 100644
--- a/features/lobby/pages/lobby.templ
+++ b/features/lobby/pages/lobby.templ
@@ -73,7 +73,7 @@ templ LobbyPage(data LobbyData) {
 							placeholder="Enter your nickname"
 							data-bind="nickname"
 							required
-							data-on:keydown.enter={ datastar.PostSSE("/games") }
+							data-on:keydown={ "evt.key === 'Enter' && " + datastar.PostSSE("/games") }
 						/>
 					</fieldset>
 					<button
diff --git a/features/snakegame/pages/game.templ b/features/snakegame/pages/game.templ
index 98b98fb..c7cc9c4 100644
--- a/features/snakegame/pages/game.templ
+++ b/features/snakegame/pages/game.templ
@@ -34,7 +34,7 @@ templ GamePage(sg *snake.SnakeGame, mySlot int, messages []chat.Message, chatCfg
 			class="snake-wrapper flex flex-col items-center gap-4 p-4"
 			data-signals={ `{"chatMsg":""}` }
 			data-init={ datastar.GetSSE("/snake/%s/events", gameID) }
-			data-on:keydown.throttle_100ms={ keydownScript(gameID) }
+			data-on:keydown__throttle.100ms={ keydownScript(gameID) }
 			tabindex="0"
 		>
 			@GameContent(sg, mySlot, messages, chatCfg, gameID)