Add keyboard handling in VocabPracticeDialog for improved user interaction

- Implemented keydown event listener to manage Enter key functionality for navigating questions and submitting answers.
- Enhanced user experience by allowing Enter to trigger actions based on the current dialog state, improving accessibility during practice sessions.
- Ensured proper cleanup of event listeners when closing the dialog to prevent memory leaks.
This commit is contained in:
Torsten Schulz (local)
2025-12-30 20:22:04 +01:00
parent df64c0a4b5
commit 352d672bdd

View File

@@ -185,6 +185,9 @@ export default {
this.locked = false; this.locked = false;
this.resetQuestion(); this.resetQuestion();
this.$refs.dialog.open(); this.$refs.dialog.open();
this.$nextTick(() => {
document.addEventListener('keydown', this.handleKeyDown);
});
this.reloadPool(); this.reloadPool();
}, },
close() { close() {
@@ -194,11 +197,32 @@ export default {
} }
const cb = this.onClose; const cb = this.onClose;
this.onClose = null; this.onClose = null;
document.removeEventListener('keydown', this.handleKeyDown);
this.$refs.dialog.close(); this.$refs.dialog.close();
try { try {
if (cb) cb(); if (cb) cb();
} catch (_) {} } catch (_) {}
}, },
handleKeyDown(event) {
// Enter soll bei "Weiter" (falsch beantwortet) funktionieren.
// Im Tippmodus soll Enter weiterhin "Prüfen" auslösen (Input hat eigenen handler).
if (event.key !== 'Enter' && event.keyCode !== 13) return;
if (this.showNextButton) {
event.preventDefault();
this.next();
return;
}
// Falls man im Tippmodus ist und der Fokus NICHT im Input liegt, erlauben wir Enter als "Prüfen".
if (!this.answered && !this.simpleMode && !this.locked) {
const tag = event.target?.tagName?.toLowerCase?.();
if (tag !== 'input' && tag !== 'textarea') {
event.preventDefault();
this.submitTyped();
}
}
},
normalize(s) { normalize(s) {
return String(s || '') return String(s || '')
.trim() .trim()