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.
This commit is contained in:
parent
a0adb8b14b
commit
21832e0099
4 changed files with 10 additions and 2 deletions
|
|
@ -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') {
|
if (e.key === '1' || e.code === 'Numpad1') {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
onThumbsDown();
|
onThumbsDown();
|
||||||
|
|
|
||||||
|
|
@ -432,6 +432,8 @@ function onKeyDown(e) {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!followMode || e.repeat) return;
|
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') {
|
if (e.key === '1' || e.code === 'Numpad1') {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
onThumbsDown();
|
onThumbsDown();
|
||||||
|
|
|
||||||
|
|
@ -1130,13 +1130,13 @@ function clearState() {
|
||||||
// ============================
|
// ============================
|
||||||
window.addEventListener('keydown', (e) => {
|
window.addEventListener('keydown', (e) => {
|
||||||
if (e.repeat) return;
|
if (e.repeat) return;
|
||||||
|
const tag = e.target.tagName;
|
||||||
|
if (tag === 'INPUT' || tag === 'SELECT' || tag === 'TEXTAREA') return;
|
||||||
// RL shortcuts: 1=negative, 2=positive
|
// RL shortcuts: 1=negative, 2=positive
|
||||||
if (e.key === '1' || e.code === 'Numpad1') { e.preventDefault(); onThumbsDown(); }
|
if (e.key === '1' || e.code === 'Numpad1') { e.preventDefault(); onThumbsDown(); }
|
||||||
if (e.key === '2' || e.code === 'Numpad2') { e.preventDefault(); onThumbsUp(); }
|
if (e.key === '2' || e.code === 'Numpad2') { e.preventDefault(); onThumbsUp(); }
|
||||||
// Follow mode toggle: f
|
// Follow mode toggle: f
|
||||||
if (e.key === 'f' || e.key === '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();
|
e.preventDefault();
|
||||||
toggleFollowMode();
|
toggleFollowMode();
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -268,6 +268,8 @@ function init() {
|
||||||
// Keyboard shortcuts for RL (work in all phases)
|
// Keyboard shortcuts for RL (work in all phases)
|
||||||
window.addEventListener('keydown', (e) => {
|
window.addEventListener('keydown', (e) => {
|
||||||
if (e.repeat) return;
|
if (e.repeat) return;
|
||||||
|
const tag = e.target.tagName;
|
||||||
|
if (tag === 'INPUT' || tag === 'SELECT' || tag === 'TEXTAREA') return;
|
||||||
if (e.key === '1' || e.code === 'Numpad1') {
|
if (e.key === '1' || e.code === 'Numpad1') {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
onThumbsDown();
|
onThumbsDown();
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue