Login screen focus on input for MFA

When logging in to HA, next screen after inserting your username / password is a screen to enter an authorization token (“just checking” screen). Unfortunately the input field is not focused by default after loading the page, so if you start typing in a number from your authenticator app without having clicked on the field, the input leads to nowhere. You have to first click on the input field and then start typing, which is annoying and not needed.

image

Suggestion, add autofocus attribute, i.e. change:

<input class="mdc-text-field__input" aria-labelledby="code" aria-controls="helper-text" aria-describedby="helper-text" type="text" placeholder="" required="" name="code" autocomplete="one-time-code">

To:

<input class="mdc-text-field__input" aria-labelledby="code" aria-controls="helper-text" aria-describedby="helper-text" type="text" placeholder="" required="" name="code" autocomplete="one-time-code" autofocus>

Or add JS:

window.addEventListener('load', function(e) { 
    document.querySelector("input").focus(); 
})

Perhaps this can also be done for the initial (username and password) login page.

Don’t forget to vote for your own suggestion

1 Like