Enhance ESC key behavior in keyboard navigation

- ESC key now clears all input amounts in the closed match panel
- TAB navigation maintains input values for continued betting
- ESC acts as proper 'cancel' operation while TAB is navigation-only
- Applied to both cashier and admin new bet pages
parent c5edf8d0
...@@ -276,8 +276,8 @@ function initializeKeyboardNavigation() { ...@@ -276,8 +276,8 @@ function initializeKeyboardNavigation() {
if (event.key === 'Escape') { if (event.key === 'Escape') {
event.preventDefault(); event.preventDefault();
if (keyboardState.currentMatch) { if (keyboardState.currentMatch) {
// Close current match and reset // Close current match and reset inputs
closeCurrentMatch(); closeCurrentMatch(true);
} else { } else {
// Go back to bets page // Go back to bets page
window.location.href = '/bets'; window.location.href = '/bets';
...@@ -341,7 +341,7 @@ function openMatch(card, matchId) { ...@@ -341,7 +341,7 @@ function openMatch(card, matchId) {
} }
} }
function closeCurrentMatch() { function closeCurrentMatch(clearInputs = false) {
if (keyboardState.currentMatch) { if (keyboardState.currentMatch) {
const card = document.querySelector(`[data-match-id="${keyboardState.currentMatch}"]`); const card = document.querySelector(`[data-match-id="${keyboardState.currentMatch}"]`);
if (card) { if (card) {
...@@ -352,6 +352,15 @@ function closeCurrentMatch() { ...@@ -352,6 +352,15 @@ function closeCurrentMatch() {
icon.className = 'fas fa-chevron-down me-1'; icon.className = 'fas fa-chevron-down me-1';
card.querySelector('.toggle-match').innerHTML = '<i class="fas fa-chevron-down me-1"></i>Select Outcomes'; card.querySelector('.toggle-match').innerHTML = '<i class="fas fa-chevron-down me-1"></i>Select Outcomes';
// Clear input amounts if requested (ESC key behavior)
if (clearInputs) {
const amountInputs = outcomesDiv.querySelectorAll('.amount-input');
amountInputs.forEach(input => {
input.value = '';
input.dispatchEvent(new Event('input')); // Trigger update of bet summary
});
}
// Remove highlighting // Remove highlighting
card.classList.remove('border-primary'); card.classList.remove('border-primary');
card.style.boxShadow = ''; card.style.boxShadow = '';
......
...@@ -276,8 +276,8 @@ function initializeKeyboardNavigation() { ...@@ -276,8 +276,8 @@ function initializeKeyboardNavigation() {
if (event.key === 'Escape') { if (event.key === 'Escape') {
event.preventDefault(); event.preventDefault();
if (keyboardState.currentMatch) { if (keyboardState.currentMatch) {
// Close current match and reset // Close current match and reset inputs
closeCurrentMatch(); closeCurrentMatch(true);
} else { } else {
// Go back to bets page // Go back to bets page
window.location.href = '/cashier/bets'; window.location.href = '/cashier/bets';
...@@ -341,7 +341,7 @@ function openMatch(card, matchId) { ...@@ -341,7 +341,7 @@ function openMatch(card, matchId) {
} }
} }
function closeCurrentMatch() { function closeCurrentMatch(clearInputs = false) {
if (keyboardState.currentMatch) { if (keyboardState.currentMatch) {
const card = document.querySelector(`[data-match-id="${keyboardState.currentMatch}"]`); const card = document.querySelector(`[data-match-id="${keyboardState.currentMatch}"]`);
if (card) { if (card) {
...@@ -352,6 +352,15 @@ function closeCurrentMatch() { ...@@ -352,6 +352,15 @@ function closeCurrentMatch() {
icon.className = 'fas fa-chevron-down me-1'; icon.className = 'fas fa-chevron-down me-1';
card.querySelector('.toggle-match').innerHTML = '<i class="fas fa-chevron-down me-1"></i>Select Outcomes'; card.querySelector('.toggle-match').innerHTML = '<i class="fas fa-chevron-down me-1"></i>Select Outcomes';
// Clear input amounts if requested (ESC key behavior)
if (clearInputs) {
const amountInputs = outcomesDiv.querySelectorAll('.amount-input');
amountInputs.forEach(input => {
input.value = '';
input.dispatchEvent(new Event('input')); // Trigger update of bet summary
});
}
// Remove highlighting // Remove highlighting
card.classList.remove('border-primary'); card.classList.remove('border-primary');
card.style.boxShadow = ''; card.style.boxShadow = '';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment