diff --git a/src/components/HomePage/HomePage.html b/src/components/HomePage/HomePage.html index 718083e..4f9db8b 100644 --- a/src/components/HomePage/HomePage.html +++ b/src/components/HomePage/HomePage.html @@ -1,7 +1,7 @@
- - Nome Home - Nome Guest + + Nome Home + Nome Guest Modalità partita: @@ -9,14 +9,16 @@ @click="modalitaPartita = '2/3'" :bg-color="modalitaPartita === '2/3' ? 'success' : 'grey-light4'" :dark="modalitaPartita === '2/3'" - class="ma1"> + class="ma1" + tabindex="-1"> 2/3 + class="ma1" + tabindex="-1"> 3/5 @@ -27,17 +29,17 @@
- - - + + +
- - - + + +
@@ -47,24 +49,24 @@
- - - + + +
- - - + + +
- Inverti ordine - + Inverti ordine + Ok
diff --git a/src/components/HomePage/HomePage.js b/src/components/HomePage/HomePage.js index 9c27938..cb617fa 100644 --- a/src/components/HomePage/HomePage.js +++ b/src/components/HomePage/HomePage.js @@ -244,6 +244,79 @@ export default { apriDialogConfig() { this.disabilitaTastiSpeciali(); this.diaNomi.show = true; + + // Aggiungi gestore Tab per il dialog + this.dialogConfigTabHandler = (e) => { + if (e.key === 'Tab' && this.diaNomi.show) { + e.preventDefault(); + e.stopPropagation(); + + const dialog = document.querySelector('.w-dialog'); + if (!dialog) return; + + const allInputs = Array.from(dialog.querySelectorAll('input[type="text"]')) + .sort((a, b) => { + const tabA = parseInt(a.closest('[tabindex]')?.getAttribute('tabindex') || '0'); + const tabB = parseInt(b.closest('[tabindex]')?.getAttribute('tabindex') || '0'); + return tabA - tabB; + }); + + if (allInputs.length === 0) return; + + // Verifica se il focus è già dentro il dialog + const focusInDialog = dialog.contains(document.activeElement); + + // Se non è nel dialog o non è in un input, vai al primo + if (!focusInDialog || !allInputs.includes(document.activeElement)) { + allInputs[0].focus(); + return; + } + + // Navigazione normale tra i campi + const currentIndex = allInputs.indexOf(document.activeElement); + let nextIndex; + + if (e.shiftKey) { + nextIndex = currentIndex <= 0 ? allInputs.length - 1 : currentIndex - 1; + } else { + nextIndex = currentIndex >= allInputs.length - 1 ? 0 : currentIndex + 1; + } + + if (allInputs[nextIndex]) { + allInputs[nextIndex].focus(); + } + } + }; + window.addEventListener('keydown', this.dialogConfigTabHandler, true); + + // Focus immediato + retry con timeout + this.$nextTick(() => { + const focusFirst = () => { + const dialog = document.querySelector('.w-dialog'); + if (dialog) { + const firstInput = dialog.querySelector('input[type="text"]'); + if (firstInput) { + firstInput.focus(); + firstInput.select(); + return true; + } + } + return false; + }; + + // Prova immediatamente + if (!focusFirst()) { + // Se fallisce, riprova dopo un breve delay + setTimeout(focusFirst, 100); + } + }); + }, + chiudiDialogConfig() { + if (this.dialogConfigTabHandler) { + window.removeEventListener('keydown', this.dialogConfigTabHandler, true); + this.dialogConfigTabHandler = null; + } + this.abilitaTastiSpeciali(); }, resettaCambi(team) { const teams = team ? [team] : ["home", "guest"];