Fixed focus lost on username input field

This commit is contained in:
2026-02-02 23:23:33 +01:00
parent 42ead722c6
commit 14c166d143
5 changed files with 20 additions and 58 deletions

View File

@@ -44,7 +44,9 @@ function setAuthUI(isAuthed) {
if (adminCard) adminCard.classList.add("hidden");
const loginUser = $("login-username");
const cachedUser = getSavedUsername();
if (loginUser && cachedUser) loginUser.value = cachedUser;
if (loginUser && cachedUser && !loginUser.dataset.userEditing && !loginUser.value) {
loginUser.value = cachedUser;
}
}
}
@@ -311,6 +313,13 @@ function setupHandlers() {
}
setAuthMode(state.authMode);
const loginUser = $("login-username");
if (loginUser) {
const markEditing = () => { loginUser.dataset.userEditing = "1"; };
["focus", "input", "keydown"].forEach(evt => loginUser.addEventListener(evt, markEditing));
loginUser.addEventListener("blur", () => { delete loginUser.dataset.userEditing; });
}
const langSelects = Array.from(document.querySelectorAll(".lang-select"));
const syncLanguageSelects = () => langSelects.forEach(sel => sel.value = getLanguage());
syncLanguageSelects();

View File

@@ -15,7 +15,7 @@
<body class="page">
<section class="card hidden" id="auth-card">
<div class="auth-logo">
<img src="logo.png" alt="CoopGameChooser logo" />
<img src="logo.png" alt="Pick'n'Play logo" />
</div>
<div class="stack">
<h2 id="auth-title" data-i18n="auth.loginHeading">Log in</h2>
@@ -62,7 +62,7 @@
<section>
<div class="status-bar">
<img src="logo.png" alt="CoopGameChooser logo" class="logo-mark">
<img src="logo.png" alt="Pick'n'Play logo" class="logo-mark">
<div class="status-left">
<span id="welcome-text" data-i18n="auth.welcome">Welcome!</span>
<a id="logout" href="#" class="link inline-link" data-i18n="auth.logout">Logout</a>

View File

@@ -132,11 +132,11 @@ button.ghost { background: transparent; border-color: #d5c7b5; color: #2c1c0d; }
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 12px;
margin-top: 12px;
width: 100%;
max-width: 900px;
max-width: 1280px;
margin-inline: auto;
}
.results-grid { max-width: none; }