From 21832e0099fdc055ddf9eec8c1fb48ea199e9e12 Mon Sep 17 00:00:00 2001
From: w1n5t0n <w1n5t0n@lnfinitemonkeys.org>
Date: Sun, 22 Mar 2026 11:52:30 +0200
Subject: [PATCH] fix(playground): prevent 1/2 keys being swallowed by focused
 sliders

When synth controls (volume, tempo, etc.) have focus after dragging,
keyboard shortcuts 1/2 for thumbs down/up were intercepted by the
range input. Now all four UIs skip shortcut handling when an input,
select, or textarea element has focus.
---
 playground/js/a-app.js | 4 ++++
 playground/js/app.js   | 2 ++
 playground/js/b-app.js | 4 ++--
 playground/js/c-app.js | 2 ++
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/playground/js/a-app.js b/playground/js/a-app.js
index 85a53e4..9ce57d9 100644
--- a/playground/js/a-app.js
+++ b/playground/js/a-app.js
@@ -1176,6 +1176,10 @@ function wireKeyboard() {
       }
     }
 
+    // Don't intercept keys when an input/select has focus
+    const tag = document.activeElement?.tagName;
+    if (tag === 'INPUT' || tag === 'SELECT' || tag === 'TEXTAREA') return;
+
     if (e.key === '1' || e.code === 'Numpad1') {
       e.preventDefault();
       onThumbsDown();
diff --git a/playground/js/app.js b/playground/js/app.js
index e01a9bc..6f5048c 100644
--- a/playground/js/app.js
+++ b/playground/js/app.js
@@ -432,6 +432,8 @@ function onKeyDown(e) {
   }
 
   if (!followMode || e.repeat) return;
+  const tag = e.target.tagName;
+  if (tag === 'INPUT' || tag === 'SELECT' || tag === 'TEXTAREA') return;
   if (e.key === '1' || e.code === 'Numpad1') {
     e.preventDefault();
     onThumbsDown();
diff --git a/playground/js/b-app.js b/playground/js/b-app.js
index 055a7ef..b2ee506 100644
--- a/playground/js/b-app.js
+++ b/playground/js/b-app.js
@@ -1130,13 +1130,13 @@ function clearState() {
 // ============================
 window.addEventListener('keydown', (e) => {
   if (e.repeat) return;
+  const tag = e.target.tagName;
+  if (tag === 'INPUT' || tag === 'SELECT' || tag === 'TEXTAREA') return;
   // RL shortcuts: 1=negative, 2=positive
   if (e.key === '1' || e.code === 'Numpad1') { e.preventDefault(); onThumbsDown(); }
   if (e.key === '2' || e.code === 'Numpad2') { e.preventDefault(); onThumbsUp(); }
   // Follow mode toggle: f
   if (e.key === 'f' || e.key === 'F') {
-    // Don't toggle if user is typing in an input
-    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') return;
     e.preventDefault();
     toggleFollowMode();
   }
diff --git a/playground/js/c-app.js b/playground/js/c-app.js
index 5c41167..17b47c5 100644
--- a/playground/js/c-app.js
+++ b/playground/js/c-app.js
@@ -268,6 +268,8 @@ function init() {
   // Keyboard shortcuts for RL (work in all phases)
   window.addEventListener('keydown', (e) => {
     if (e.repeat) return;
+    const tag = e.target.tagName;
+    if (tag === 'INPUT' || tag === 'SELECT' || tag === 'TEXTAREA') return;
     if (e.key === '1' || e.code === 'Numpad1') {
       e.preventDefault();
       onThumbsDown();